js代码实现百度换肤

案例分析：

1.这个案例练习的是给一组元素注册事件

2.给4个小图片利用循环注册点击事件

3.当我们点击了这个图片，让我们页面背景改为当前图片

4.核心算法：把图片的src路径取过来，给body作为背景即可

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background-image: url(img/one.jpg);}#baidu{float: right;}#baidu li{float: left;list-style: none;}#baidu img{width: 140px;height: 200px;position: relative;right: 462px;top: 300px;}</style></head><body><ul id="baidu"><li><img src="img/one.jpg" /></li><li><img src="img/two.jpg" /></li><li><img src="img/three.jpg" /></li></ul><script type="text/javascript">var imgs=document.querySelector('#baidu').querySelectorAll('img');for(var i=0;i<imgs.length;i++){imgs[i].onclick=function(){document.body.style.backgroundImage='url('+this.src+')';}}<script></body></html>

js代码实现百度换肤相关推荐

前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤 querySelector方法抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
添加js代码：百度网盘网页版开倍速
好久没写博客了,上半年都在准备比赛,计算机设计大赛.物联网设计大赛都拿了省一,西门子拿了省特(好像还是总分第一),还有一些其他稀稀散散的比赛也终于都结束了,但是保研这件事估计还是凉凉了,呜呜呜,今年没 ...
一个简单的百度换肤效果
一个简单的换肤效果 html和css部分 JavaScript部分 html和css部分 <style>* {margin: 0;padding: 0;}body {background: ...
js实现百度换肤效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

js代码实现百度换肤

js代码实现百度换肤相关推荐

最新文章

热门文章