您的位置：首页 > 编程语言 > Java开发

JavaWeb开发切换皮肤技术

2015-03-27 09:49 281 查看

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

<a href="#" id="choose">切换皮肤</a>





<div class="skin">

<div class="pic">

<div class="one">

<a href="#">



<img src="images/2.jpg" alt="壁纸1" width="195" height="115" />

</a>

<a href="#"><img src="images/3.jpg" alt="壁纸" width="97" height="59"/></a>

<a href="#"><img src="images/4.jpg" alt="壁纸" width="97" height="59"/></a>

</div>

<div class="two">

<a href="#"><img src="images/5.jpg" alt="壁纸1" width="97" height="59" /></a>

<a href="#"><img src="images/6.jpg" alt="壁纸" width="97" height="59"/></a>

<a href="#"><img src="images/7.jpg" alt="壁纸" width="97" height="59"/></a>

</div>

<div class="three">

<a href="#"><img src="images/8.jpg" alt="壁纸1" width="97" height="59" /></a>

<a href="#"><img src="images/9.jpg" alt="壁纸" width="97" height="59"/></a>

<a href="#"><img src="images/10.jpg" alt="壁纸" width="195" height="115"/></a>

</div>

<div class="four">

<a href="#"><img src="images/11.jpg" alt="壁纸1" width="97" height="59" /></a>

<a href="#"><img src="images/12.jpg" alt="壁纸" width="97" height="59"/></a>

<a href="#"><img src="images/13.jpg" alt="壁纸" width="97" height="59"/></a>

</div>

</div>

</div>

<div class="overlay"></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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航