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> & ...
随机推荐
- javascript004_ECMA5数组新特性
•对于ECMAscript5这个版本的Array新特性补充: –位置方法:indexOf lastIndexOf –迭代方法:every filter forEach some ...
- 由UI刷新谈到线程安全和Android单线程模型
1.为什么说invalidate()不能直接在线程中调用? Android提供了Invalidate方法实现界面刷新,但是Invalidate不能直接在非UI主线程中调用,因为他是违背了单线程模型:A ...
- 【c++】类中的const成员
const成员变量 举个例子 #include <iostream> using namespace std; class A { public: A(int size) : SIZE(s ...
- 如何让自己的网站也能实现HTTPS访问 阿里云 转
转 自 http://jingyan.baidu.com/article/90895e0fd9903164ec6b0bf7.html?qq-pf-to=pcqq.group 最近搞微信小程序,服务器 ...
- Connection连接、关闭数据库
创建连接sql server数据库的字符一般有两种, 一种是以sql验证登录的 一种是以windows身份验证的 步骤: 引用命名空间System.Date.SqlClient 将连接方法声明至字符串 ...
- C# 日历类
using System; namespace DotNet.Utilities { /// <summary> /// 农历属性 /// </summary> public ...
- 【10】Quartz.net 定时服务实例
一.安装nuget包 Install-Package Quartz Install-Package Common.Logging.Log4Net1211 Install-Package log4net ...
- Hadoop学习笔记(8) ——实战 做个倒排索引
Hadoop学习笔记(8) ——实战 做个倒排索引 倒排索引是文档检索系统中最常用数据结构.根据单词反过来查在文档中出现的频率,而不是根据文档来,所以称倒排索引(Inverted Index).结构如 ...
- 高并发系列之——缓存中间件Redis
1 概念和使用场景 下载路径 2 基本存储类型 String List Set SortedSet Hash 3 事务 单线程执行,即只能保证一个client发起的事务中的命令可以连续的执行,而中间不 ...
- String拾遗
简介: String作为日常最常用的类,还是有必要对其中的细节做一些了解的,这篇就结合源码来看看这个常用的类. 一. 总述 类图如下: 从图中可以看到String是实现了 java.io.Serial ...