JavaWeb开发切换皮肤技术

<!doctype html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>JavaWeb开发切换皮肤技术</title>
<meta name="Keywords" content="关键词,关键字">
<meta name="description" content="">

<style type="text/css">
*{margin:0;padding:0;}
//默认值
body{/*background:url("images/1.jpg");*/}
img{border:0;display:block;margin:0 1px 1px 0;}
/*以.开头的css样式称之为类样式*/
.skin{width:100%;height:200px;background:#fff;padding-top:20px;/*display:none*/;
position:absolute;top:0;left:0;
z-index:2;
display:none;
}
.skin .pic{width:590px;height:180px;/*border:1px solid red;*/margin:0 auto;}
.skin .pic .one{width:196px;height:180px;/*border:1px solid green;*/float:left;}
.skin .pic .one a{float:left;}

.skin .pic .two{width:97px;float:left;}
.skin .pic .three{width:196px;float:left;margin-left:1px;}
.skin .pic .three a{float:left;}
.skin .pic .four{width:97px;float:left;}

.skin .pic a:hover img{opacity:0.7;filter:alpha(opacity=70);}/*选中后有阴影*/

.overlay{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;
/*兼容所有浏览器的透明度*/
filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;
z-index:1;
display:none;
}

</style>

</head>
<body>

<div class="skin">
<div class="pic">
<div class="one">
<a href="#">

<img src="data:images/2.jpg" alt="壁纸1" width="195" height="115" />
</a>
<a href="#"><img src="data:images/3.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="data:images/4.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
<div class="two">
<a href="#"><img src="data:images/5.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="data:images/6.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="data:images/7.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
<div class="three">
<a href="#"><img src="data:images/8.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="data:images/9.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="data:images/10.jpg" alt="壁纸" width="195" height="115"/></a>
</div>
<div class="four">
<a href="#"><img src="data:images/11.jpg" alt="壁纸1" width="97" height="59" /></a>
<a href="#"><img src="data:images/12.jpg" alt="壁纸" width="97" height="59"/></a>
<a href="#"><img src="data:images/13.jpg" alt="壁纸" width="97" height="59"/></a>
</div>
</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){ /*javascript的入口函数*/
//alert("Hello！晚上好!");
$("#choose").click(function(){
$(".skin,.overlay").toggle("slow");
});

$(".overlay").click(function(){
$(".skin,.overlay").toggle("slow");
});

//切换皮肤
//第一种方法
//$(".skin").find("a").click(function(){
//alert("Hello,Good Evening！晚上好,!");
// var src=$(this).find("img").attr("src");/*.replace(/-\d*ig,'')*/
//alert(src);
// $("body").css("background","url("+src+")");

//});

//第二种方法，需要记忆功能
$(".skin").find("a").click(function(){
var src=$(this).find("img").attr("src");/*.replace(/-\d*ig,'')*/
$("body").css("background","url("+src+")");
//存储图片地址到浏览器的sessionStorage里边
sessionStorage.setItem("src",src);
});

//获取浏览器sessionStorage的值
var sessionSrc=sessionStorage.getItem("src");
if(sessionSrc){//如果sessionSrc不等于空
$("body").css("background","url("+sessionSrc+")");
}

});
</script>

</body>
</html>

JavaWeb开发切换皮肤技术相关推荐

javaweb开发后端常用技术_Web后端开发(11)——Session会话技术
Session 学过了Cookie客户端会话技术,下面我们来学习Session服务器端会话技术. Session概念 Session是服务器端会话技术,在一次会话的多次请求间共享数据,将数据保存在服务 ...
javaweb开发后端常用技术_Java Web开发后端常用技术汇总
技术名称及官网Spring Framework Spring容器 http://projects.spring.io/spring-framework/SpringMVC Spring MVC框架 h ...
java web开发技术大_2021年六大javaweb开发主流技术
作为历史最为悠久的编程语言--java,历经数十年依然盘踞在编程榜最前面的位置,这与它的技术和应用范围是分不开的,同时呢,javaweb开发主流技术更是java开发者时时刻刻关注的问题,接下来我们一起 ...
javaweb开发要学习的所有技术和框架总结
javaweb开发要学习的所有技术和框架总结: 前端技术: HTML, CSS, JAVASCRIPT, JQUERY, AJAX HTML "超文本"就是指页面内可以包含图片.链 ...
java web国外研究现状_国外javaWeb开发技术.doc
国外javaWeb开发技术.doc 外java Web开发技术 MVC结构模式是XeroxPARC在20世纪80年代为编程语言Smalltalk-80 发明的一种软件设计模式. 缑艳阳认为MVC将应用 ...
javaweb基于SSH开发库尔勒市经济技术开发区电子政务网站+论文毕业设计
基于S2SH开发库尔勒市经济技术开发区电子政务网站+论文(大作业/毕业设计) 开发工具:MyEclipse+Jdk+Tomcat+SQLServer数据库演示视频: 基于SSH开发电子政务网站部分 ...
JavaWeb开发专题(一)-JavaWeb入门
1.JavaEE的概念 Java Enterprice Edtion(Java企业版).JavaEE并不是一个具体的技术.而是由SUN公司提出的一个Java 企业级开发的平台,是一种标准.其中包含13 ...
JavaWeb学习总结(一)——JavaWeb开发入门(转载）
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
javaweb开发中的那些坑
最近电脑有点问题,没办法就重装系统了,花了一个晚上重装IDE.,配置环境,好不容易把eclipse的环境弄好,加载之前的项目时却又到各种问题,一怒之下,写一篇记录下在javaweb开发中遇到的各种坑 ...

JavaWeb开发切换皮肤技术

JavaWeb开发切换皮肤技术相关推荐

最新文章

热门文章