这个项目我还没有完全写出来，先记录至此。感觉是方法不对，背景图片的切换方法有Problem。如若有一大神发现了我的文章，还望指导，吾将感激不尽。日后代码还会再钻研再改改。

<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>

//

Javascript之换肤（未完待续）的更多相关文章

  1. 利用原生Javascript实现计算器（未完待续）

    这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...

  2. javascript有用小功能总结(未完待续)

    1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...

  3. Go web编程学习笔记——未完待续

    1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...

  4. asp.net面试题总结1（未完待续。。。。）

    1.MVC中的TempData\ViewBag\ViewData区别? 答:页面对象传值,有这三种对象可以传. Temp:临时的 Bag:袋子 (1)  TempData  保存在Session中,C ...

  5. ASP.NET MVC 系列随笔汇总[未完待续……]

    ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...

  6. 关于DOM的一些总结（未完待续......）

    DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...

  7. 我的SQL总结---未完待续

    我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...

  8. virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续)

    virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续) 第一次接触到 linux,不知道linux的确很强大,然后用virtualbox ...

  9. MVC丶 (未完待续······)

         希望你看了此小随 可以实现自己的MVC框架     也祝所有的程序员身体健康一切安好                                                     ...

  10. 一篇文章让Oracle程序猿学会MySql【未完待续】

    一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...

随机推荐

  1. PHP实现基于Swoole简单的HTTP服务器

    引用Swoole官方定义: PHP语言的异步.并行.高性能网络通信框架,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,数据库连接池,AsyncTa ...

  2. C++中标准容器Vector，元素操作.insert（）小结

    insert() 函数有以下三种用法: iterator insert( iterator loc, const TYPE &val );  //在指定位置loc前插入值为val的元素,返回指 ...

  3. Spring JdbcTemplate小结

    提供了JdbcTemplate 来封装数据库jdbc操作细节: 包括: 数据库连接[打开/关闭] ,异常转义 ,SQL执行 ,查询结果的转换 使用模板方式封装 jdbc数据库操作-固定流程的动作,提供 ...

  4. android知乎小圆圈刷新效果

    前几天看到包括知乎在内的很多应用都使用到了一种小圆圈划动刷新的效果,仔细查了一下,原来是android v7包里面最新的刷新效果.使用起来也是十分简单的. 首先先建立一个activity,在布局文件里 ...

  5. Python3爬取中文网址

    本以为Python3的中文兼容性无比友好,结果还是会有一点问题的. 解决方案如下,就以爬取我自己的一个网页极简翻译为例 #coding:utf8 import urllib.request impor ...

  6. c3p0详细配置

    c3p0详细配置 官方文档 : http://www.mchange.com/projects/c3p0/index.html <c3p0-config> <default-conf ...

  7. TChromeTabs 优化改进

    已知未解决问题 全屏时当窗体失去焦点,则会显示出未绘制完成的原标题栏(Fixed): 处于非 Areo 效果下时,窗体标题栏需要定制. 新增按钮上的 Hint 提示后再移至其它标签,将无法重新提示. ...

  8. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

  9. CN今日凌晨出现全部瘫痪的故障，持续近6个小时

    今日凌晨1点左右,所有cn后缀的网站出现无法访问的情况,原因来自于所有的cn域名均无法解析.据国内知名DNS解析商DNSLA称,故障源自CN所使用的根域名授权服务器瘫痪所致,故障一直持续到今天早上7点 ...

  10. 使用C# 实现文件锁

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...