Javascript之换肤

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript之换肤相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>标题</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="描述">    
<style type="text/css">
*{margin:0px;}
img{margin:0px 1px 1px 0px;}
body{background:url("http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_1.jpg"); }
#huanfu{width:100%; height:200px; background:#fff; position:absolute; top:0px; left:0px; display:none;}
#huanfu .hfImg{width:590px; height:180px;  margin:0px auto;}
.one{width:196px; height:180px;  float:left;}
.two{width:98px; height:180px;  float:left;}
a:hover img{filter:Alpha(opacity=70);-moz-opacity: 0.7; opacity: 0.7;  }
.hfImg a{ float:left; position:relative; }
img.skin{ position:absolute; right:5px; bottom:5px; display:none;}
</style>

    </head>
<body>
<p class="button" align="center">换肤</p>
<div id="huanfu">
    <div class="hfImg">
        <div class="one">
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_1.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/o_1-1.jpg" width=195 height=119 />
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_2.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_2-2.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_3.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_3-3.jpg" width=97 height=59 />
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
        </div>

        <div class="two">
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_4.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_4-4.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_5.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_5-5.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_6.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_6-6.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/></a>
        </div>

        <div class="one">
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_7.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_7-7.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_8.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_8-8.jpg" width=97 height=59 />
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_9.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_9-9.jpg" width=195 height=119 />
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
        </div>
        <div class="two">
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_10.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_10-10.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_11.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_11-11.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
            <a href="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828702/o_12.jpg"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832681/t_12-12.jpg" width=97 height=59/>
                        <img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/832188/o_skin.png" class="skin"/>
            </a>
        </div>
    </div>
</div>


<script type="text/javascript"  src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
    $(".button").click(function(e){
        //慢慢向下滑动,展开
        $("#huanfu").slideToggle("quick");
        //阻止事件
        e.stopPropagation();
    });


    $("#huanfu .hfImg a").click(function(e){
        var src=$(this).find("img").attr("src").replace(/-\\d*/,"");
        $("body").css("background","url("+src+")");
        //$(this).find(".skin").show().parent().parent().siblings().find(".skin").hide();
            //先隐藏所有
            $("#huanfu .hfImg a").find(".skin").hide();
            //再显示当前
            $(this).find(".skin").show();
            //保存会话里面
            sessionStorage.setItem("src",src);
        //阻止事件
        e.stopPropagation();
    });


    $(document).click(function(e){
        //慢慢隐藏
        $("#huanfu").slideUp("slow");
        //阻止事件

        e.stopPropagation();
    });


        var sessionSrc=sessionStorage.getItem("src");
        if(sessionSrc){
        $("body").css("background","url("+sessionSrc+")");
}
    

</script>

</body>
</html>

 

以上是关于Javascript之换肤的主要内容,如果未能解决你的问题,请参考以下文章

android之换肤原理解读

网页换肤效果 系统界面切换皮肤样式

Android 开发多线程之换个视角理解

JavaScript第四天笔记04——JS百度换肤例子

c++文件解析之换行(CRLFLFCR)

c++文件解析之换行(CRLFLFCR)