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> & ...
随机推荐
- shiro学习笔记_0600_自定义realm实现授权
博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 ...
- <机器学习实战>读书笔记--logistic回归
1. 利用logistic回归进行分类的主要思想是:根据现有数据对分类边界线建立回归公式,以此进行分类. 2.sigmoid函数的分类 Sigmoid函数公式定义 3.梯度上升法 基本思想:要找 ...
- Linux笔记-Linux命令初解2
在看linux过程中,文件属性管理是一个难点,因而作为初学者的我来说,我直接将其放在后面来慢慢研究,因而我个人觉得先学习后面一些知识点之后,回过头来将一些你所不懂的去解透,这是极好的意见事情.对了,我 ...
- Idea软件Vim插件问题
人家说用webstorm是纯前端,用Idea是java+前端,好,那就用Idea,装上试试,全选所有插件安装,奇迹出现了,选中一行代码,backspace,删不了,我的天,好吧,复制粘贴的快捷键也不行 ...
- 把IP字符串转换为IPv4标准格式
把IP字符串转换为IPv4标准格式,如一个IP为127.0.0.1转为127.000.000.001格式? 即是说“点”分隔的数据不够三位数字长度,转换为三位数字长度. Insus.NET有尝试写了一 ...
- JS日期、月份的加减
JS日期.月份的加减 需要注意的是返回的月份是从0开始计算的,也就是说返回的月份要比实际月份少一个月,因此要相应的加上1 // 日期,在原有日期基础上,增加days天数,默认增加1天 function ...
- Java - 使可访问性最小化
模块设计是否良好,有个重要的因素在于,相对外部模块是否隐藏内部数据以及实现细节. 设计良好的模块会隐藏实现细节,并将API与其实现隔离开来. 模块之间通过API进行通信,对于内部工作情况互不可见. 即 ...
- Cheatsheet: 2018 04.01 ~ 04.30
Web Writing VS Code Extensions with TypeScript Docker How to write excellent Dockerfiles Raspberry P ...
- 怎么实现Linux下的逆波兰计算器dc？
#返回上一级 @Author: 张海拔 @Update: 2014-01-12 @Link: http://www.cnblogs.com/zhanghaiba/p/3516660.html /* * ...
- 【SSH网上商城项目实战23】完成在线支付功能
转自: https://blog.csdn.net/eson_15/article/details/51464415 上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用 ...