js实现百度换肤功能

点击图片实现换肤

实现思路：

1、获取到界面的图片节点

2、利用数据驱动界面的思想，把图片的路径保存在数组中

3、遍历数组

4、绑定图片的点击事件

5、获取到body往里面添加背景图片的URL链接

<style>body {background-image: url(./img/two.jpg);}img {width: 200px;height: 150px;}</style>
</head><body><img src="./img/two.jpg" alt=""><img src="./img/one.jpg" alt=""><script>/* 1、获取到界面的图片节点2、利用数据驱动界面的思想，把图片的路径保存在数组中3、遍历数组4、绑定图片的点击事件5、获取到body往里面添加背景图片的URL链接*/var img1 = document.getElementsByTagName('img')var arr = ['./img/two.jpg', './img/one.jpg']for (let i = 0; i < arr.length; i++) {img1[i].onclick = function () {document.body.style.backgroundImage = `url('${arr[i]}')`}}</script>

js实现百度换肤功能相关推荐

仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
js实现百度换肤效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
前端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"& ...
为微信小程序增加换肤功能
起源之前,我做了一个展示类的微信小程序,本来都快要完结的了,可是突然,我才听说还要给小程序增加一个换肤功能,这个换肤功能可不是简单的写两套不同的样式表就行了,因为他要可以在后台动态替换背景,底图,文 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...

js实现百度换肤功能

js实现百度换肤功能相关推荐

最新文章

热门文章