自丢网
标题: js实现百度换肤效果案例演示 [打印本页]
作者: admin 时间: 2020-2-14 07:49
标题: js实现百度换肤效果案例演示
JavaScript实现百度换肤效果案例演示代码教程
- <style>
- body {
- background-repeat: no-repeat;
- background-size: cover;
- }
-
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
-
- #baidu {
- text-align: center;
- margin: 0 auto;
- }
-
- #baidu li {
- display: inline-block;
- cursor: pointer;
- }
-
- #baidu li img {
- width: 200px;
- border: 2px solid black;
- height: 80px;
- }
- </style>
- <div id="ziidu">
- <ul id='baidu'>
- <li><img src="1.jpg" alt=""></li>
- <li><img src="2.jpg" alt=""></li>
- <li><img src="3.jpg" alt=""></li>
- </ul>
- </div>
- <script>
- var body = document.body;
- var imgs = document.querySelector('#baidu').querySelectorAll('img');
- for (i = 0; i < imgs.length; i++) {
- imgs[i].onclick = function() {
- body.style.backgroundImage = 'url(' + this.src + ')';
- }
- }
- </script>
复制代码 输出效果演示图:
(, 下载次数: 289)