网页换肤功能

最新推荐文章于 2024-08-02 06:15:47 发布

chuangzhanben4759

最新推荐文章于 2024-08-02 06:15:47 发布

阅读量137

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/wangning0535/blog/534998

版权

一、网页换肤效果

1、使用工具

jquery-1.7.2.min.js（下载地址：http://pan.baidu.com/s/1dDobJhR） jquery.cookie.js(下载地址：http://pan.baidu.com/s/1bnlycbl)

2、源码实现：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页换肤特效</title>
<link type="text/css" rel="stylesheet" href="skin_0.css" id="cssfile"/> 
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<style type="text/css">
 *{margin:0px; padding:0px;}
 ul{margin:10px;}
 ul li{list-style:none; float:left; background:url(../%E8%B4%AD%E7%89%A9%E7%BD%91%E7%AB%99/images/theme.gif); width:15px; height:15px;      text-indent:-999px; margin-right:4px;}
    #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-positioin:75px 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;}
</style>
<script type="text/javascript">
 $(function(){
    //获取li元素
   var $li=$("ul li");
   console.info($li);
   //给li元素添加单击事件
   $li.click(function(){
    //执行换肤
    switchSkin(this.id);
    });
     //获取cookie中的皮肤
    var cookie_skin=$.cookie("mySkin");
     if(cookie_skin){
     //如果cookie中如缓存皮肤,默认使用这个皮肤
      switchSkin(cookie_skin);
     
     }
    
   //换肤操作
   function switchSkin(skinName){
    //设置选中状态,之前设置li的id和皮肤的css文件名相同
    $("#"+skinName).addClass("selected").siblings().removeClass("selected");
    //通过<link>元素的href属性设置换肤样式
    $("#cssfile").attr("href",skinName+".css");
    //吧当前皮肤加入cookie里
   // $.cookie("mySkin",skinName,{ path:"/",expires: 10});
    $.cookie( "mySkin" ,  skinName  , { path: '/', expires: 10 });
    }
  });
</script>
</head>
<body>
<!--
 网页换肤原理：根据 当单击li时，<style>元素的href属性引用 对应的css文件
-->
 <ul>
     <li id="skin_0" class="selected">灰色</li>
        <li id="skin_1">紫色</li>
        <li id="skin_2">红色</li>
        <li id="skin_3">天蓝色</li>
        <li id="skin_4">橙色</li>
        <li id="skin_5">淡绿色</li>
    </ul>
    <div id="news">
     <div id="news1">
     时事新闻
    </div>
    <div id="news2">
     娱乐新闻
    </div>
    </div>
</body>
</html>

转载于:https://my.oschina.net/wangning0535/blog/534998

chuangzhanben4759

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页换肤功能

一、网页换肤效果 1、使用工具 jquery-1.7.2.min.js（下载地址：http://pan.baidu.com/s/1dDobJhR） jquery.cookie.js(下载地址：http://pan.baidu.com/s/1bnlycbl) 2、源码实现： html代码...
复制链接

扫一扫