前端百度换肤案例

今天给大家分享一下浏览器换肤的功能

一，先展示一下项目效果


二，布局

三，纯HTML

<div class="img-list">
    <ul>
        <li data-src="1.1.jpg"><img src="1.jpg" alt="" height="100"></li>
        <li data-src="2.1.jpg"><img src="2.jpg" alt="" height="100"></li>
        <li data-src="3.1.jpg"><img src="3.jpg" alt="" height="100"></li>
        <li data-src="4.1.jpg"><img src="4.jpg" alt="" height="100"></li>
        <li data-src="5.1.jpg"><img src="5.jpg" alt="" height="100"></li>
    </ul>
    <div class="btn"></div>
</div>

运行效果

四，加上样式

<style type="text/css">
    * {
        margin: 0;/*外边距*/
        padding: 0;/*内边距*/
    }

    body {
        background-image: url("1.1.jpg");/*规定要使用的背景图像。*/
        background-repeat: no-repeat; /*设置背景图像是否及如何重复。*/
        background-size: cover; /*规定背景图片的尺寸。*/
    }

    .img-list {
        width: 100%;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .img-list ul {
        display: flex;
        justify-content: space-around; /*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
        align-items: center; /*使用 align-content 属性对齐交叉轴上的各项（垂直）。*/
        list-style: none; /*清除小圆点*/
        width: 100%;
        height: 200px;
    }
    .btn{
        position: absolute;
        right: 0px;
        top: 0;
        width: 50px;
        height: 50px;
        background-image: url("upseek.png");
    }
    .btn:hover{
        background-position-y: -64px;
    }
</style>

运行效果

五，js代码

<script>
    $("li").click(function () {
        // alert("这是测试！！！")
        var src = $(this).attr("data-src");
        // alert(src);
        $("body").css({
            "background-image": "url(" + src + ")"
        });
    });
</script>

六，源码和素材
请点击这里