现在介绍网页换肤 的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下。效果很简单,我就直接讲怎么使用的。
其中用到了jquery .cookie.js
首先是html代码:
XML/HTML代码
- < div id = "header_demo" >
- < a id = "logo" href = "#" > Rainweb </ a >
- < ul id = "skin" >
- < li id = "skin_0" title = "蓝色" class = "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 >
CSS代码:
CSS代码
- /*头部样式开始*/
- #header _demo{
- width : 700px ;
- height : 80px ;
- border : 1px solid #AAAAAA ;
- margin : 10px auto ;
- /** background:#3B5998; **/
- }
- /*logo样式开始*/
- #logo {
- float : left ;
- margin :0 0 0 10px ;
- color : #FFF ;
- font-size :3em;
- font-weight :700;
- line-height : 80px ;
- }
- /*切换皮肤样式*/
- #skin {
- float : right right ;
- margin : 10px ;
- padding : 4px ;
- width : 120px ;
- list-style : none ;
- border : 1px solid #CCCCCC ;
- background : #FFF ;
- }
- #skin li {
- float : left ;
- margin-right : 4px ;
- width : 15px ;
- height : 15px ;
- text-indent :- 9999px ;
- overflow : hidden ;
- display : block ;
- cursor : pointer ;
- background-image : url (images/theme.gif);
- }
- #skin _0 { background-position : 0px 0px ; }
- #skin _1 { background-position : 15px 0px ; }
- #skin _2 { background-position : 35px 0px ; }
- #skin _3 { background-position : 55px 0px ; }
- #skin _4 { background-position : 75px 0px ; }
- #skin _5 { background-position : 95px 0px ; }
- #skin _0.selected { background-position : 0px 15px ; }
- #skin _1.selected { background-position : 15px 15px ; }
- #skin _2.selected { background-position : 35px 15px ; }
- #skin _3.selected { background-position : 55px 15px ; }
- #skin _4.selected { background-position : 75px 15px ; }
- #skin _5.selected { background-position : 95px 15px ; }
javascript代码:
JavaScript代码
- //网站换肤
- $(function () {
- var $li = $( "#skin li" ); //查找到元素
- $li.click(function () { //给元素添加事件
- switchSkin(this .id); //调用函数
- });
- //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了
- var cookie_skin = $.cookie( "MyCssSkin" ); //获取Cookie的值
- if (cookie_skin) { //如果确实存在Cookie
- switchSkin(cookie_skin); //执行
- }
- });
- function switchSkin(skinName) {
- $("#" + skinName).addClass( "selected" ) //当前<li>元素选中
- .siblings().removeClass("selected" ); //去掉其他同辈<li>元素的选中
- $("#cssfile" ).attr( "href" , "css/skin/" + skinName + ".css" ); //设置不同皮肤
- $.cookie("MyCssSkin" , skinName, { path: '/' , expires: 10 }); //保存Cookie
- alert(skinName);
- }
最后就是一个link文件:
XML/HTML代码
- < link id = "cssfile" type = "text/css" href = "css/skin/skin_5.css" rel = "Stylesheet" >
演示地址:http://www.wufangbo.com/demo/jquery/05/index.html
下载地址:http://www.wufangbo.com/demo/jquery/05/05.rar
转载至(http://www.wufangbo.com/jquery-page-peels)