javaScript实现百度换肤案例

如下所示：

点击任意图片后：

实现！

下面是代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 百度换肤 */.huan {width: 800px;}.huan>img {width: 200px;float: left;}</style>
</head><body><!-- 百度换肤 --><div class="huan"><img src="../img/百度换肤1.png" alt=""><img src="../img/百度换肤2.png" alt=""><img src="../img/百度换肤4.png" alt=""></div><script>// 获取var imgs = document.querySelectorAll('img');var bodys = document.querySelectorAll('body');// 循环每一次点击--因为有多个点击事件for (var i = 0; i < imgs.length; i++) {// onclick鼠标点击事件// 添加事件imgs[i].onclick = function() {// 点击后更改body背景图片路径document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body></html>

javaScript实现百度换肤案例相关推荐

前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
JavaScript:演示Ajax的get和post请求，练习选顶卡和换肤案例
JavaScript:演示Ajax的get和post请求,练习选顶卡和换肤案例 Ajax 异步请求特别提示: 异步请求不要使用live server插件,必须创建一个本地服务器环境同步与异步以前 ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤 querySelector方法抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
JavaScript大法第一式--换肤实践
犹如百度页面进行换肤 1.jQuery简单页面于是,我们简单做了一个类似功能的代码: <!DOCTYPE html> <html lang="en"> & ...
一个简单的百度换肤效果
一个简单的换肤效果 html和css部分 JavaScript部分 html和css部分 <style>* {margin: 0;padding: 0;}body {background: ...

javaScript实现百度换肤案例

javaScript实现百度换肤案例相关推荐

最新文章

热门文章