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> & ...
随机推荐
- ANR机制
1.什么是ANR(Application Not Responding) 在Android中,应用程序的响应性是由ActivityManager和WindowManager系统服务监视的.当监测到以下 ...
- 一次java导出pdf的经历
近期由于工作需要,需要将html代码导入到pdf中,经过了几种pdf的方案对比后发现IText是最简单和便捷的一种方式,于是乎采用了Itext. PDF生成 第一步:导入Maven依赖 <!-- ...
- Service , DAO ,DBUTtil;
Service , DAO ,DBUTtil; util一般为基本的数据库操作:打开,关闭数据库连接,查询和更新操作. service 调用 dao 实现业务操作 dao层设计要为service服务, ...
- unity简易ui框架
在unity项目开发中,ui模块的开发往往占据了很大一部分工作,部分游戏甚至绝大部分的工作都是在ui上,如何高效管理各种界面,这里分享一套高效易用的UI框架. 首先,我们定义一个PanelBase类, ...
- 转：详解PV、UV、VV、IP及其关系与计算
一.什么是PV? PV即Page View,网站浏览量,指页面浏览的次数,用以衡量网站用户访问的网页数量.用户每次打开一个页面便记录1次PV,多次打开同一页面则浏览量累计.一般来说,PV与来访者的数量 ...
- MVC缓存（一）
//OutputCache是设置缓存,参数Duration设置缓存的过期时间,OutputCache可以加到Controller上,也可以加到Action上,但是当Controller与Action都 ...
- Dapper的简单使用(初学者归纳)
Dapper的简单使用(初学者归纳) //引用:using System;using System.Collections.Generic;using System.Linq;using System ...
- springboot之内嵌tomcat修改端口号
第一种: 在配置文件中直接修改 server.port=8089 第二种: 直接定义 TomcatEmbeddedServletContainerFactory,注册bean: @Configurat ...
- SQL语句的拼凑
StringBuilder sql = new StringBuilder("SELECT * FROM t_customer WHERE 1=1"); /* * 2. 判断条件, ...
- 【Chromium】GPU进程启动流程
本篇文档以gpu进程的创建和启动为例,讲述chormium如何启动一个browser进程的子进程 PS:本文使用的chromium代码版本为71 前言 GPU进程的启动时机是由browser进程负责的 ...