網頁換膚功能

時間 2019-11-17

標籤網頁功能欄目 HTML 简体版

原文原文鏈接

1、網頁換膚效果javascript

一、使用工具css

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

二、源碼實現：java

html代碼：jquery

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。