Javascript之换肤（未完待续）
这个项目我还没有完全写出来，先记录至此。感觉是方法不对，背景图片的切换方法有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之换肤（未完待续）的更多相关文章
- 利用原生Javascript实现计算器（未完待续）
这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...
- javascript有用小功能总结(未完待续)
1)javascript让页面标题滚动效果 代码如下: <title>您好,欢迎访问我的博客</title> <script type="text/javasc ...
- Go web编程学习笔记——未完待续
1. 1).GOPATH设置 先设置自己的GOPATH,可以在本机中运行$PATH进行查看: userdeMacBook-Pro:~ user$ $GOPATH -bash: /Users/user/ ...
- asp.net面试题总结1（未完待续。。。。）
1.MVC中的TempData\ViewBag\ViewData区别? 答:页面对象传值,有这三种对象可以传. Temp:临时的 Bag:袋子 (1) TempData 保存在Session中,C ...
- ASP.NET MVC 系列随笔汇总[未完待续……]
ASP.NET MVC 系列随笔汇总[未完待续……] 为了方便大家浏览所以整理一下,有的系列篇幅中不是很全面以后会慢慢的补全的. 学前篇之: ASP.NET MVC学前篇之扩展方法.链式编程 ASP. ...
- 关于DOM的一些总结（未完待续......）
DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...
- 我的SQL总结---未完待续
我的SQL总结---未完待续 版权声明:本文为博主原创文章,未经博主允许不得转载. 总结: 主要的SQL 语句: 数据操作(select, insert, delete, update) 访问控制(g ...
- virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续)
virtualbox搭建ubuntu server nginx+mysql+tomcat web服务器1 (未完待续) 第一次接触到 linux,不知道linux的确很强大,然后用virtualbox ...
- MVC丶 (未完待续······)
希望你看了此小随 可以实现自己的MVC框架 也祝所有的程序员身体健康一切安好 ...
- 一篇文章让Oracle程序猿学会MySql【未完待续】
一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方 ...
随机推荐
- ASP.NET MVC4中用 BundleCollection
来源:http://www.cnblogs.com/madyina/p/3702314.html ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: &l ...
- ecshop收货人信息中修改手机号为必填
Ecshop 修改收货人信息 把电话改成选择填写 手机改为必填 (加强版) 1. 编辑根目录/js/utils.js 增加手机号码的正则表达式 参照Utils.isTel = function ( ...
- Javascript 原型继承(续)—从函数到构造器的角色转换
对于每一个声明的函数,里边都会带有一个prototype成员,prototype会指向一个对象,现在我们来聚焦prototype指向的这个对象,首先我们会认为,这个对象是一个该函数对应的一个实例对象, ...
- CentOS 6系统下安装 JDK1.6
CentOS 6系统下安装 JDK1.6 JDK(Java Development Kit)是Sun Microsystems针对Java开发员的产品.自从Java推出以来,JDK已经成为使用最广泛的 ...
- UVa297 Quadtrees
// UVa297 Quadtrees // 题意:给两棵四分树的先序遍历,求二者合并之后(黑色部分合并)黑色像素的个数.p表示中间结点,f表示黑色(full),e表示白色(empty) // 算法: ...
- Struts2常量的具体用法实例(一)
XML代码: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC ...
- 梦断代码3-message center消息的集中分发
上一代产品模块有30多个,从底层硬件基础组件到上层应用控制.qos,各个模块通信据说都是直接向模块索要信息.最坏的死锁情况大概就是这样: 在产品升级后,加入了一个消息中心的模块,负责统一管理各个模块的 ...
- iOS开发——语法&高级Block练习
高级Block练习 一 .最简单的block使用 使用block的三个步骤:1.定义block变量 2.创建block代码块 3.调用block匿名函数 定义一个block的构成包括:返回值,bloc ...
- Jquery Validate根据其他元素的事件来触发单个元素的异步校验
场景:在做一个车辆信息管理模块,而车牌是通过车牌颜色和车牌号码来确定唯一性的,录入车牌信息时需对车牌进行唯一性校验.
- JS 操作 radio input（cc问卷管理）
1.选中特定的单选按钮 function showDetail(content){ $("input[name^='radio']").removeAttr("check ...