<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百度换肤效果</title> <style> * { margin: 0; padding: 0; } body { background: url(image/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> </head> <body> <ul class="baidu"> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> </ul> <script> // 1. 获取元素对象 var imgs=document.querySelector('.baidu').querySelectorAll('img'); // 2. 循环注册事件 执行事件程序 for(var i=0;i<imgs.length;i++) { imgs[i].οnclick=function() { document.body.style.backgroundImage='url('+this.src+')' } } </script> </body> </html>
百度换肤效果
最新推荐文章于 2024-03-06 23:02:33 发布