百度换肤怎么实现的html,JavaScript 实现百度换肤功能

运用场景

平时很常用，在很多的网页上边我们都可以看到切换皮肤的功能，所以今天我们来实现以下

效果

选中第一个图片时

image.png

选中第二个图片时

image.png

具体思路

当我们点击这个皮肤的图片时，就让它运用到我们的网页效果上边，具体的操作步骤就是给每一个图片新建一个点击事件，当我们触发这个事件的时候就要把这个事件对应的图片的src就是链接应用在网页body的backgroundImage 这个属性上边就可以改边这个背景

上代码

body{

background-image: url('1.jpg');

}

img{

width: 100px;

height: 100px;

}

li{

display: inline;

}

• 
• 
• 

// 获得到所有的img标签

var imgs = document.getElementsByTagName('img')

// 利用循环的方式，把每一个图片对象设置上点击事件，并修改背景图片

for (var i = 0; i

imgs[i].onclick = function(){

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

}

}