zoukankan      html  css  js  c++  java
  • 换肤动画

    html:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/demo2.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/demo2.js"></script>
    </head>
    <body>
    <div id="header">
    <div id="header-icon">
    <div id="dcbg"><a href="javascript:;">换肤</a></div>
    </div>
    </div>
    <div id="dpics">
    <div id="pictop">
    <div id="pictop-icon"><div id="dup"><a href="javascript:;">收起</a></div></div>
    </div>
    <div id="pic-con">
    <div class="dpic"><img src="img/bg0.jpg"></div>
    <div class="dpic"><img src="img/bg1.jpg"></div>
    <div class="dpic"><img src="img/bg2.jpg"></div>
    <div class="dpic"><img src="img/bg3.jpg"></div>
    <div class="dpic"><img src="img/bg4.jpg"></div>
    <div class="dpic"><img src="img/bg5.jpg"></div>
    </div>
    </div>
    </body>
    </html>

    css:

    *{
    padding:0px;
    margin:0px;
    font-family:"微软雅黑";
    }

    #header{
    100%;
    height:30px;
    background-color:#808080;
    }
    #header-icon{
    800px;
    height:30px;
    margin:0 auto;
    line-height:30px;
    }
    #dcbg a{
    color:#ffffff;
    text-decoration:none;
    }
    .dpic img{
    100px;
    }
    .dpic{
    float:left;
    margin-top:10px;
    margin-left:30px;
    }
    #pic-con{
    900px;
    margin:0 auto;
    }
    #dpics{
    100%;
    height:100px;
    position:fixed;/*固定定位*/
    top:0px;
    left:0px;
    background-color:#ffffff;
    display:none;

    }
    #pictop{
    100%;
    height:20px;
    border-bottom:solid 1px #b6ff00;
    }
    #pictop-icon{
    900px;
    height:20px;
    margin:0 auto;

    }
    #dup{
    float:right;
    }
    #dup a{
    text-decoration:none;
    color:red;
    }

    js:

    $(function () {
    $("#dcbg a").click(function () {
    $("#dpics").show(1000);
    });
    $("#dup a").click(function () {
    $("#dpics").hide(1000);
    });

    //$(".dpic img").click(function () {
    // var bgsrc = $(this).attr("src");
    // $("body").css("background-image", "url(" + bgsrc + ")");
    //});

    $(".dpic img").click(function () {
    var i = $(this).attr("src");
    $("body").css("background-image", "url(" + i + ")");
    });

    });

  • 相关阅读:
    练习 字符串存入字典 数组的降序 倒序 字符串目录存不存在 数组中文排序
    随机 随机获得100个50-100的数字字符串,存到数组并输出
    练习 字符串10题
    把一个字符串反输出abc123.xyz789输出987zyx.321cba
    把NSString *string=@"2013 年 05 月 05 日";以2013-05-05输出
    dephi cef3获取Post数据
    Delphi下 多显示器,将窗体显示于第二个显示器
    Delphi下POS机
    SQLConnection 连接 SQLite
    cxGrid主视图取得从视图
  • 原文地址:https://www.cnblogs.com/sunshinezjb/p/8550169.html
Copyright © 2011-2022 走看看