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在功能性方 ...
随机推荐
- PHP再学习1——cURL表单提交、HTTP请求和响应分析
1.前言 最近迷恋WEB方面的技术,虽然自己是一个嵌入式工程师,但是我深知若需要把传感器终端的数据推送至“平台”必然会和WEB技术打交道.在工作中发现嵌入式工程师喜欢 二进制形式的协议,例如MODBU ...
- python 循环
200 ? "200px" : this.width)!important;} --> 介绍 python中有两种循环,分别是for...in循环.while循环:for.. ...
- Linux下安装、启动MySQL
启动与停止 1.启动 MySQL安装完成后启动文件mysql在/etc/init.d目录下,在需要启动时运行下面命令即可. [root@localhost mysql]# /etc/init.d/my ...
- php error file_get_contents()
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- SqlServer刷新所有视图
CREATE PROCEDURE RefreshAllView AS DECLARE MyCursor CURSOR FOR select Name from dbo.sysobjects where ...
- 错误内存【读书笔记】C程序中常见的内存操作有关的典型编程错误
题记:写这篇博客要主是加深自己对错误内存的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对C/C++程序员来讲,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构成的 ...
- 关于c#调用C++代码的一些应用的体会
1.dll函数的导入: 关键字:unmanaged code ; managed code; 具体应用类:System.Runtime.InteropServices 具体使用方法: ...
- C# : 操作Word文件的API - (将C# source中的xml注释转换成word文档)
这篇博客将要讨论的是关于: 如何从C#的source以及注释, 生成一份Word格式的关于各个类,函数以及成员变量的说明文档. 他的大背景如下...... 最近的一个项目使用C#, 分N个模块, 在项 ...
- [GIF] GIF Loop Coder Single Mode
We'll take a look at Single Mode animations and strategies for making this type of animation smoothl ...
- Linux 内核动态函数调用可视化工具
要求: python .7以上 https://www.python.org/ftp/python/ EG:wget --no-check-certificate https://www.python ...