码迷,mamicode.com
首页 > 其他好文 > 详细

仿百度换肤实例

时间:2020-06-12 12:29:23      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:meta   ack   tor   百度   loading   cto   var   ade   select   

开始

技术图片

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>换肤</title>
        <style type="text/css">
            body{ background-image: url(http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2);}
            ul,li{ list-style: none; margin: 15px;}
            .baidu{}
        </style>
    </head>
    <body>
        <ul class="baidu">
            <li><img src="http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2" width="100px" height="100px"></li>
            <li><img src="http://img03.sogoucdn.com/app/a/100520146/524ade47b69439c7ba03184e55d3ec6e" width="100px" height="100px"></li>
            <li><img src="http://img02.sogoucdn.com/app/a/100520146/0a9075a03657256c5d33afc1bdf19de0" width="100px" height="100px"></li>
            <li><img src="http://img02.sogoucdn.com/app/a/100520146/cb2ac622c4ba7d259f8d96a740e41936" width="100px" height="100px"></li>
        </ul>
        <script>
            var imgs = document.querySelector(".baidu").querySelectorAll("img");
            //2. 循环注册事件
            for (var i =0; i < imgs.length; i++){
                imgs[i].onclick = function(){
                    //this.src 就是我们点击图片的路径 
                    //把这个路径 this.src 给body 就可以了
                    document.body.style.backgroundImage = ‘url(‘+ this.src +‘)‘;
                }
            }
        </script>
    </body>
</html>

 

仿百度换肤实例

标签:meta   ack   tor   百度   loading   cto   var   ade   select   

原文地址:https://www.cnblogs.com/XiaoJun6/p/13098166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!