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>
百度换肤
巴特西

jQuery 小案例

最新文章

热门文章
