javascript进行百度换肤 和显示隐藏一个窗口的操作
简单的运用javascript来进行百度换肤的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度换肤</title>
<style>
*{
padding:0;
margin:0;
}
body{
width:100%;
background:url('../js/2.jpg') no-repeat center 0;
background-size:cover;//自适应屏幕大小
}
.box{
width:100%;
padding-top:40px;
background-color: rgb(255,0,0,0.3);
text-align: center;
}
.box img{
width:100px;
}
</style>
</head>
<body>
<div class="box">
<img src="../js/2.jpg" alt="" id="pic1">
<img src="../js/1.jpg" alt="" id="pic2">
<img src="../js/3.jpg" alt="" id="pic3">
<img src="../js/4.jpg" alt="" id="pic4">
<img src="../js/5.jpg" alt="" id="pic5">
</div>
<script type="text/javascript">
window.onload = function(){
var oimg1 = document.getElementById('pic1');
var oimg2 = document.getElementsByTagName('img')[1];//获取父类中的下标为1的元素
var oimg3 = document.getElementById('pic3');
var oimg4 = document.getElementsByTagName('img')[3];
var oimg5 = document.getElementById('pic5');
oimg1.onclick = function(){
console.log(this); //this代表当前本身
document.body.style.backgroundImage = "url(../js/2.jpg)";//设置你点击的时候的图片
//下面是改变自己变大的同时让别的缩小
this.style.width ='200px'; //设置这个js中的图片大小
oimg2.style.width = '100px'; //动态的别的变大这个变小
oimg3.style.width = '100px';
oimg4.style.width = '100px';
oimg5.style.width = '100px'; }
oimg2.onclick = function(){
console.log(this);
document.body.style.backgroundImage = "url('../js/1.jpg')";
this.style.width = '200px';
oimg1.style.width ='100px';
oimg3.style.width = '100px';
oimg4.style.width = '100px';
oimg5.style.width = '100px'; }
oimg3.onclick = function(){
console.log(this);
// document.style.backgroundImage = "url('../js/3.jpg')";
document.body.style.backgroundImage = "url(../js/3.jpg)";
this.style.width = '200px';
oimg1.style.width = '100px';
oimg2.style.width = '100px';
oimg4.style.width = '100px';
oimg5.style.width = '100px'; }
oimg4 .onclick = function(){
console.log(this);
document.body.style.backgroundImage = "url(../js/4.jpg)";
this.style.width = '300px';
oimg1.style.width = '100px';
oimg2.style.width = '100px';
oimg3.style.width = '100px';
oimg5.style.width = '100px';
}
oimg5.onclick = function(){
document.body.style.backgroundImage = "url(../js/5.jpg)";
this.style.width = '200px';
oimg1.style.width = '100px';
oimg2.style.width = '100px';
oimg3.style.width = '100px';
oimg4.style.width = '100px';
} }
</script>
</body>
</html>
显示隐藏一个窗口界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏显示</title>
<style>
.show{
height:200px;
width:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<button>隐藏</button>
<div class="show" id = 'heizi'></div> </div>
<script>
window.onload = function(){
var heizi = document.getElementById('heizi');
var isShow = true;
document.getElementsByTagName('button')[0].onclick = function(){//先以第一个元素来进行判定
console.log(this);
if(isShow){
heizi.style.display = 'none';
this.innerText = '显示';
isShow = false;
}else{
heizi.style.display = 'block';
this.innerText = '隐藏';
isShow = 'true';
}
}
}
</script> </body>
</html>
显示隐藏窗口界面
javascript进行百度换肤 和显示隐藏一个窗口的操作的更多相关文章
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
- 利用JavaScript的if语句判断元素显示隐藏
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- javascript滚动到大于一定距离显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript实现网页换肤
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- duilib入门之贴图描述、类html文本描述、动态换肤、Dll插件、资源打包
转载自duilib入门文档 贴图描述: Duilib的表现力丰富很大程度上得益于贴图描述的简单强大.Duilib的贴图描述分为简单模式和复杂模式两种. 简单模式使用文件名做为贴图描述内容,在这种方式下 ...
- Android主题换肤 无缝切换
2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...
- Add an Action that Displays a Pop-up Window 添加显示弹出窗口按钮
In this lesson, you will learn how to create an Action that shows a pop-up window. This type of Acti ...
- Javascript之换肤（未完待续）
这个项目我还没有完全写出来,先记录至此.感觉是方法不对,背景图片的切换方法有Problem.如若有一大神发现了我的文章,还望指导,吾将感激不尽.日后代码还会再钻研再改改. <head> & ...
随机推荐
- WCF系列教程之WCF操作协定
一.简介 1.在定义服务协定时,在它的操作方法上都会加上OperationContract特性,此特性属于OperationContractAttribute 类,将OperationContract ...
- WebDriver获得表格里所有单元格的文本
方法为: 1. 得到表格中所有的tr,存到list到中 2.对tr进行循环,根据当前的tr,得到当前所有td的集合存到list当中 3.循环中所有td里的文本 package com.example. ...
- js处理json数据，java处理json数据
一.js处理json数据 处理办法之一是把本机json数据或远程返回json数据用eval函数,使之变成DOM对象. 例如: var people = { "programmers" ...
- DFT 工程师三大法宝的使用
众所周知,芯片主要由三大部分构成. 芯片示例-可见下图 1.与电路板和其他芯片的接口-IO pad 2.存放程序的空间-RAM和ROM 3.搭建逻辑电路的基本组件 –标准逻辑单元 DFT工程师所有的工 ...
- nginx 反向代理https
nginx 反向代理https 原来我用vertx创建了一个https apiserver,想着用nginx反向代理一下.证书是阿里云上免费一年的. 后来发现nginx要反向代理https自己也必 ...
- Java如何操作对象（bean）进行动态排序？
原文出自:https://blog.csdn.net/seesun2012 简介如题:Java如何操作对象(bean)进行动态排序?Java实体类(bean)动态排序? 原理:利用反射根据指定的属性值 ...
- vs2015中的数据库架构对比工具（New Schema Comparison）
大家都知道VS里的功能多到你根本没用过,今天来说说这个New Schema Comparison,他能做的事情就是在vs中对比我们两个数据库的架构.结构,并且能够更新过去或者生成脚本. Step.1( ...
- zsh: command not found: gulp
明明安装了gulp,但是为什么执行gulp命令却在控制台输出 zsh: command not found: gulp 可能因为gulp没有被全局安装 在控制台输入 which gulp 如果输出 g ...
- 撩课-Python-每天5道面试题-第5天
一. 给定一个圆心和半径, 以及一个点坐标, 判定该点是否在圆内; 例如: 用户输入圆心: (1, 2) 半径: 2.5 测试点为(2, 2)结果: 判定测试点是在圆内 思路: 结合勾股定理, 计算测 ...
- javaweb项目中绝对路径的写法理解
Tomcat的默认访问路径为http://localhost:8080,后需添加项目路径. 请求转发,是转发到本项目中的其他文件,所以在默认访问路径中添加了本项目的项目路径,故可以省略项目名称: re ...