具体功能:
点击图片浏览器背景变为所点的图片
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> * { margin: 0; padding: 0; } .baidu{ overflow: hidden; margin: 50px auto; } body{ width: 99%; height: 100vh; background:no-repeat center top; background-size: 100%; } li { list-style: none; } li img{ width: 100px; height: 150px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img{ width: 100px; } </style> <body> <ul class="baidu"> <li><img src="../img/pyy.jpg" alt=""></li> <li><img src="../img/pyy1.jpg" alt=""></li> <li><img src="../img/pyy2.jpg" alt=""></li> </ul> <script> 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>
以上就是本章的全部内容,感谢您的阅读。