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> & ...
随机推荐
- 【软件】chrome设置默认字体
安装stylish插件 新建样式,加入代码 * { font-family: "Microsoft YaHei", "微软雅黑" !important; }
- oauth2.0的授权流程详解
授权模式 1)oauth2.0 提供了四种授权模式,开发者可以根据自己的业务情况自由选择. 授权码授权模式(Authorization Code Grant) 隐式授权模式(简化模式)(Implici ...
- java中Filter过滤器处理中文乱码的方法
注意问题:在学习用selvert的过滤器filter处理中文乱码时,在filter配置初始化时用了utf-8处理中文乱码,而在提交的jsp页面中却用了gbk.虽然两种都可以出来中文乱码,但是却造成了处 ...
- Could not find a version that satisfies.... No matching distribution found for .....
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/10227403.html 今天在安装mysql-python的时候报了很多的错误,其中一条就是这 ...
- jsf和facelets的生命周期
一.JSF生命周期 JSF是基于事件驱动.JSF生命周期分为两个主要阶段:执行阶段和渲染阶段. 1.执行阶段 分为六个阶段: 恢复视图阶段 当客户端请求一个JavaServer Faces页面时,Ja ...
- Hibernate 查询语句基本用法
转发: http://459104018-qq-com.iteye.com/blog/720538
- python 爬虫入门案例----爬取某站上海租房图片
前言 对于一个net开发这爬虫真真的以前没有写过.这段时间开始学习python爬虫,今天周末无聊写了一段代码爬取上海租房图片,其实很简短就是利用爬虫的第三方库Requests与BeautifulSou ...
- 【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
- 局域网内配置虚拟机的hostname
一般上我们在局域网内访问,比如宿主机访问虚拟机的时候可以直接使用IP去访问,大多数情况下也都适用.但是对于有的情况,比如像新版的hbase的配置,它默认将localhost作为hbase.master ...
- src/main/resources文件夹
Error starting ApplicationContext. To display the auto-configuration report re-run your application ...