• 一键换肤原理


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

    思路:先是布局上我们需要定位,所以为了避免背景把换肤按钮给盖住,需要把按钮的标签放到大背景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>

  • 相关阅读:
    MySQL 序列使用
    04_使用httpclient提交参数_get提交参数
    03_使用httpurlconnection提交参数_get中文参数解决&post提交
    01_今日内容
    00_消息机制回顾
    20_内容回顾
    19_MySmartImageView添加展示默认图的功能
    18_MySmartImageView实现
    17_自定义View对象构造说明
    16_新闻客户端_展示图片内容完成
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/6810117.html
Copyright © 2020-2023  润新知