• 一键换肤原理


    效果:通过按键弹出备选皮肤,点击选择样式后,更换成功。

    思路:先是布局上我们需要定位,所以为了避免背景把换肤按钮给盖住,需要把按钮的标签放到大背景div的下面,并列结构。假如倒置了可以加层级让其显示。

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <title>换肤</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="list.css" rel="stylesheet" type="text/css"/>

    <link href="reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">

    html,body{

    100%;height:100%;

    }

    p{

    100%;

    height: 50px;

    background: #000;

    color:#fff;

    font-size: 30px;

    line-height: 50px;

    text-align: center;

    position:absolute;

    top:0;

    left: 0;

    cursor: pointer;

    }

    body{

    100%;

    height:100%;

    background: url("img/1.jpg") no-repeat;background-size: 100% 100%;

    position:relative;

    }

    div{

    100%;

    height:100%;

    opacity: 0.7;

    background: #000;

    display: none;

    }

    ul{

    800px;height:400px;position:absolute;left:50%;top:50%;margin-left: -400px;margin-top: -200px;display: none;

    }

    li{

    198px;height:198px;border:1px solid #ccc;float: left;

    }

    li>img{

    100%;height:100%;

    }

    </style>

    </head>

    <body>

    <div></div>

    <p>换肤请点我</p>

    <ul>

    <li> <img src="img/1.jpg" alt=""/></li>

    <li> <img src="img/2.jpg" alt=""/></li>

    <li> <img src="img/3.jpg" alt=""/></li>

    <li> <img src="img/4.jpg" alt=""/></li>

    <li> <img src="img/5.jpg" alt=""/></li>

    <li> <img src="img/6.jpg" alt=""/></li>

    <li> <img src="img/7.jpg" alt=""/></li>

    <li> <img src="img/8.jpg" alt=""/></li>

    </ul>

    <script src="jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $("p").click(function () {

    $("p").slideUp();

    $("div,ul").show();

    });

    $("div").click(function () {

    $("p").slideDown();

    $("div,ul").hide();

    });

    $("ul li img").click(function(){

    var src=$(this).attr("src");

    $("body").css({"background-image":"url("+src+")"});

    });

    </script>

    </body>

    </html>

  • 相关阅读:
    前端开发经验总结
    开发组件的原则
    jQuery deferred对象API详解
    prototype、constructor那点事儿
    text-overflow:ellipsis的那点事儿
    9 个超实用的 jQuery 代码片段
    BFC
    Console命令详解,让调试js代码变得更简单
    前端css规范
    什么是FOUC?如何避免FOUC?
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/6810117.html
Copyright © 2020-2023  润新知