百度换肤效果

零基础入门，只要有兴趣，20分钟教你学会百度换肤效果。没错，只需要20行代码就能搞。

废话少说，直接上效果：

先了解一下html节点对象

DOM的树形结构（节点树）

html中的所有标签，文本，空格都可以叫做节点对象。

我们可以通过DOM的选择器来操作节点：

获取节点对象

1.通过标签id 获取节点

var obj = document.getElementById("id名称")

描  述：获取网页指定id名字的元素，返回一个对象语  法：var obj = document.getElementById("id名称")参  数：id名称（注：需要加引号）返回值：对象，对象的属性就是HTML标签的属性

2.通过标签名称获取节点

var obj = document.getElementsByTagName("标签名称")

功  能：获取网站指定标签名称的元素语  法：var obj = document.getElementsByTagName("标签名称")参  数：标签名称（注：需要加引号）返回值：返回一个集合（数组），集合中每个元素都是一个单独标签对象

3.通过标签name获取节点

var obj = document.getElementsByName("标签name名称")

功  能：通过标签的name值获取元素语  法：var obj = document.getElementsByName("标签name名称")参  数：标签的name名称（注：需要加引号）返回值：返回值是数组，通常用来获取有name的input的值

4.通过标签类名获取节点

var obj = document.getElementsByClassName()  ("标签的class属性名称")

功  能：通过class名获取元素语  法：var obj = document.getElementsByClassName()  ("标签的class属性名称")参  数：标签的class属性名称（注：需要加引号）返回值：返回值是数组

注：
不是所有标签都有name值；
在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

ES5选择器：强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的

document.querySelector();          //返回匹配到的第一个元素
document.querySelectorAll();       //返回一个数组，哪怕只有一个元素

可以直接填写,我们需要找的标签名,类名,id名称

给事件绑定点击事件

直接给节点绑定事件

/获取节点对象节点对象.onclick = function(){}

通过监听器给节点绑定点击事件

/获取节点对象节点对象.addEventListener（function（）{}）

了解的差不多了我们可以从这里开始写我们的百度换肤具体代码：

先再一个div盒子中存放五张我们需要的图片:

<body><div><img src="img/百度换肤1.jpg"/><img src="img/百度换肤2.jpg"/><img src="img/百度换肤3.jpg"/><img src="img/百度换肤4.jpg"/><img src="img/百度换肤5.jpg"/></div>
</body>

运行后，五张图片就会这样呈现再浏览器页面中

然后我们通过css来给他们设置样式:

CSS:

<style type="text/css">div{margin: 50px auto;width: 500px;height: 100px;background-color: white;display: flex;justify-content: space-around;}div img{width: 90px;height: 98px;}body{background: url(img/百度换肤1.jpg)  center;}</style>

我们要将五张图片设置一定的大小，放在div盒子中，将div放在body中间。
再将其中一张图片作为body的背景图片。

下面也是最重要的一部来实现背景图片的切换。
我们需要用到DOM对节点对象的操作

1.先获取我们需要操作的节点

也就是所有图片节点

var box = document.querySelector('div').querySelectorAll('img');

注意：这里获取的是全部图片节点，他们存放一起
然后我们需要给每张图片绑定点击事件
我们需要遍历来绑定

for (var i = 0;i < box.length;i++) {box[i].onclick = function() {console.log(this);}}

这里我们注意this的指向可以将他打印出来，看他是否指向我们的操作的节点对象，

确定是指向操作的节点对象后，当点击当前图片对象后，将它的路径设置给body

document.body.style.backgroundImage = 'url('+this.src+')';

最后整体js代码：

<script type="text/javascript">var box = document.querySelector('div').querySelectorAll('img');for (var i = 0;i < box.length;i++) {box[i].onclick = function() {console.log(this);document.body.style.backgroundImage = 'url('+this.src+')';}}</script>

码源：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{margin: 50px auto;width: 500px;height: 100px;background-color: white;display: flex;justify-content: space-around;}div img{width: 90px;height: 98px;}body{background: url(img/百度换肤1.jpg)  center;}</style></head><body><div><img src="img/百度换肤1.jpg"/><img src="img/百度换肤2.jpg"/><img src="img/百度换肤3.jpg"/><img src="img/百度换肤4.jpg"/><img src="img/百度换肤5.jpg"/></div><script type="text/javascript">var box = document.querySelector('div').querySelectorAll('img');for (var i = 0;i < box.length;i++) {box[i].onclick = function() {console.log(this);document.body.style.backgroundImage = 'url('+this.src+')';}}</script></body>
</html>

看完这篇博文后，怎么样？是否你已经迫不及待要试着来敲一下这个效果了。

觉得博主写的不错的，可以关注三连，更多的好玩开发案例每天更新~~

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！相关推荐

视频教程-5小时零基础入门小程序云开发-微信开发
5小时零基础入门小程序云开发码农一枚,非著名全栈开发人员.分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑. 多年全栈开发经验,擅长小程序,java,安卓,web前端开发. 邱石 ¥29.0 ...
Dart语言基础，看完这篇文章就够了（二）
文章内容是我在学习Flutter过程中对知识点的梳理和总结.如有不对的地方,欢迎指出. 本文承接Dart语言基础,看完这篇文章就够了(一),进一步了解Dart语法知识. 文章目录 1 流程控制语句 2 ...
九宫怎么排列和使用_广告视频配音剪映零基础入门教程第二十三篇：剪辑之九宫格教程...
朋友圈最火九宫格视频你们知道是怎样制作的吗?我们常常在玩朋友圈的时候想用九宫格照片,但是你们有没有遇到这种情况,想玩九宫格却发现找不到那么多能用的照片,那这时候怎么办呢?玩腻了平常图片的发法,今天我们 ...
零基础学python-看完这篇，零基础也知道怎么学Python
原标题:看完这篇,零基础也知道怎么学Python 近期 ,不少读者后台询问类似这样的一些问题 : 大佬 ,我是一个小白 ,很想学习 Python ,它能做些什么啊 ?您这边有什么好的入门建议吗 ? 坦 ...
零基础入门学完Java？如何写出一份漂亮的简历，建议如下
现在互联网产业非常的好,很多人想要转行做Java开发,也就是我们常说的程序员,之所以这么多人想要转行程序员,就是因为程序员的工作工资比很多工作的工资高几倍.在这个每个人都缺钱的时代,每个人都想多赚钱. ...
python零基础入门（完整版）
1python软件下载我们需要下载python语言翻译器(也就是运行环境),和一个用来写python的软件,用它写python语言比较方便首先打开百度,下载org 然后点击下载然后选择一个稳定版 ...
程序异常异常代码: 0xc0000005_Java基础：看完这篇你还怕碰到异常吗？
前言在日常的开发以及平时的学习练习中,异常相信对于大家来讲并不陌生,但是对于异常的具体使用.底层实现以及分类等等可能并不是很了解.今天我就抽出了一点时间系统的整理了异常的各个知识点,希望能够帮助到大 ...
python从入门到撩妹 2 —— 30行代码实现520小彩蛋
作者自我介绍:大爽歌, b站小UP主 ,直播编程+红警三 ,python1对1辅导老师 . 本文对应视频版本: 520小彩蛋 python32行代码实现 -- python从入门到撩妹-2 1 彩蛋效 ...
数学建模速成！两小时零基础入门 MATLAB 教程（一）—— Matlab常用操作和基本语法
Matlab常用操作和基本语法没有涉及到编程的内容, 就是介绍一些MATLAB软件的操作, 和简单的语法如注释输出之类的目录文章目录 Matlab常用操作和基本语法 1. help查看函数说明 ...
数学建模速成！两小时零基础入门MATLAB教程（六）—— 定义和调用函数
MATLAB定义函数文章目录 MATLAB定义函数 1. 常见问题 2. 如何定义 2.1语法 2.2举例 3. 如何使用 3.1 得到返回值 3.2 将定义的函数作为参数传递给其他函数(函数指针) ...

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！

获取节点对象

给事件绑定点击事件

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！相关推荐

最新文章

热门文章

一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！

获取节点对象

给事件绑定点击事件

一个小时，零基础入门，看完这篇30行代码 教你实现百度换肤！相关推荐

最新文章

热门文章

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！相关推荐