jQuery 小案例

用jquery实现百度换肤的模式;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度换肤</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            /*width:100%;*/
            background:url('../js/2.jpg') no-repeat center 0; /*设置了body的背景图片 然后居中显示 然后只显示一次 */
            background-size:cover;   /*自适应屏幕大小*/
        }
            .box{
                width:100%;
                padding-top: 40px;
                background-color: rgb(255,0,0,0.3);
                text-align: center;
            }
        .box img{
            width:100px;
            /*height:20px;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../js/2.jpg" alt="" id="pic1" >
        <img src="../js/1.jpg" alt="" id="pic2" >
        <img src="../js/3.jpg" alt="" id="pic3">
        <img src='../js/4.jpg' alt="" id="pic4">
        <img src="../js/5.jpg" alt="" id="pic5">
    </div>

    <script type="text/javascript" src="../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.box img').click(function(){ //先获取  你的body下的img
                console.log($(this)); //打印这个你点击的图片
                var imgUrl = $(this)[0]['src'];  //因为你获取的this是一个对象  而且这个对象只有第一条数据是有效果的  所以你取到第一条数据中的图片的路径
                console.log($(this)[0]['src']);
                $('body').css('background',`url(${imgUrl})`); //把你点击的图片的路径给设置成body的背景图片 并且为了让它能识别出来就用字符串把它拼接起来
               $(this).css('width',200).siblings().css('width',100);
            })
        })
    </script>
</body>
</html>
百度换肤
猜你喜欢
