页面换肤实例

最新推荐文章于 2022-02-06 10:16:57 发布

A_山水子农

最新推荐文章于 2022-02-06 10:16:57 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签：页面换肤页面换肤实例更换皮肤页面肤色

本文链接：https://blog.youkuaiyun.com/qq_27626333/article/details/53906476

web 专栏收录该内容

9 篇文章

订阅专栏

本实例通过JQuery实现页面换肤，原理是通过调用不同的样式表文件来实现不同皮肤的切换，并且需要将换好的皮肤计入cookie中，这样用户下次访问时，就可以显示永华自定义的皮肤了。这里我定义了6个样式表，代表着6中页面皮肤，选择完样式之后必须存入cookie。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面换肤</title>
		<meta name="description" content="" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<script type="text/javascript" src="js/jquery.cookie.js" ></script>
	    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	    <link rel="stylesheet" type="text/css" href="css/skin_0.css" id="cssfile"/>
		<style>
			#skin{
				list-style: none;
				border: 1px solid #A9A9A9;
				padding: 0px;
			}
			li{
				position: relative;
				display: inline-block;
				border: 1px solid;
				width: 15px;
				height: 15px;
				margin: 5px 3px;
				margin-top:8px;
			}
			#skin_0{
				border-color: darkgrey;
				background-color: darkgrey;
			}
			#skin_1{
				border-color: mediumpurple;
				background-color: mediumpurple;
			}
			#skin_2{
				border-color: red;
				background-color: red;
			}
			#skin_3{
				border-color: skyblue;
				background-color: skyblue;
			}
			#skin_4{
				border-color: darkorange;
				background-color: darkorange;
			}
			#skin_5{
				border-color: lawngreen;
				background-color: lawngreen;
			}
			.selected{
				top:-7px;
			}
			#div_side_0,#div_side_1{
				margin: 10px 20px;
				width:550px;
				height:60px;
				line-height: 24px;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
			}
		</style>
		<script>
		    function swithSkin(skinName){
		    	$("#"+skinName).addClass("icon iconfont icon-gou-copy selected")
				.siblings().removeClass("icon iconfont icon-gou-copy selected");
				$("#cssfile").attr("href","css/"+skinName+".css");
				$.cookie("MyCssSkin",skinName,{paht:'/',expires:30});
		    }
			$(function(){
				var cookie_skin=$.cookie("MyCssSkin");
				if(cookie_skin){
					swithSkin(cookie_skin);
				}
				var li = $("#skin li");
				li.click(function(){
					swithSkin(this.id)
				})
				
				
			})
		</script>
	</head>
	<body>
		<fieldset style="width:600px;margin: 30px auto;">
			<legend>页面换肤</legend>
			<ul id="skin">
				<li id="skin_0" title="灰色" class="icon iconfont icon-gou-copy selected"></li>
				<li id="skin_1" title="紫色"></li>
				<li id="skin_2" title="红色"></li>
				<li id="skin_3" title="天蓝色"></li>
				<li id="skin_4" title="橙色"></li>
				<li id="skin_5" title="淡绿色"></li>
			</ul>
			<div id="div_side_0">
				页面换肤
			</div>
			<div id="div_side_1">
				页面换肤
			</div>
		</fieldset>
	</body>
</html>