网页换肤

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5 <title>网页换肤</title>
 6 <link href="css/styles1.css" rel="stylesheet" type="text/css" id="styles">
 7 <script src="js/jquery-1.10.2.min.js"></script>
 8 <script src="js/jsxg.js"></script>
 9  <!--   引入jQuery的cookie插件 -->
10     <script src="http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js" type="text/javascript"></script>
11     <script type="text/javascript">
12         //<![CDATA[
13         $(function(){
14             var $li =$("#color_tab li");
15             $li.click(function(){
16                 switchSkin( this.id );
17             });
18             var cookie_skin = $.cookie( "MyCssSkin");
19             if (cookie_skin) {
20                 switchSkin( cookie_skin );
21             }
22         });
23         function switchSkin(skinName){
24                  $("#"+skinName).addClass("selected")  //当前<li>元素选中
25                      .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
26                   $("#styles").attr("href", "css/" + skinName + ".css");  //设置不同皮肤
27                  $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
28         }
29         //]]>
30     </script>
31 </head>
32 
33 <body>
34 <div class="box">
35      <div class="color_tab" id="color_tab">
36            <ul><li id="styles" class="selected"></li><li id="styles1"></li><li id="styles2"></li><li id="styles3"></li><li id="styles4"></li></ul>
37      </div>
38      <div class="s1">
39            <div class="w1"></div>
40            <div class="w2"></div>
41      </div>
42      <div class="s2">
43            <div class="w2"></div>
44            <div class="w1"></div>
45      </div>
46 </div>
47 
48 </body>
49 </html>

 1 @charset "gb2312";
 2 /* CSS Document */
 3 body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,input,p,span,img,b,i,em,strong,a{ margin:0; padding:0;}
 4 img{  margin:0; padding:0; border:0; vertical-align:top;}
 5 ul,li{list-style:none;}
 6 body{ font-family:"宋体",Arial,Verdana,Helvetica,sans-serif; font-size:12px;}
 7 a{text-decoration:none;}
 8 table{ width:100%; width:100% !important;}
 9 .cl:after{content:'20';display:block;height:0;clear:both}
10 .cl{*zoom:1}
11 
12 .box{ width:1000px; margin:0 auto; background:#CCC;}
13 .color_tab{ height:30px; padding:20px;}
14 .color_tab ul li{ width:30px; height:30px; float:left; margin:0 10px; cursor:pointer;}
15 .color_tab ul li#styles{ background:#069;}
16 .color_tab ul li#styles1{ background:#993;}
17 .color_tab ul li#styles2{ background:#393;}
18 .color_tab ul li#styles3{ background:#93C;}
19 .color_tab ul li#styles4{ background:#9CC;}
20 
21 .s1{ width:500px; height:800px; float:left; background:#063;}
22 .s2{ width:480px; height:800px; float:right; background:#C9F;}
23 .w1{ height:200px; background:#66F;}
24 .w2{ height:200px; background:#996;}
25 
26 .selected{ box-shadow:2px 2px 2px #999999;}

// JavaScript Document

$(document).ready(function(){
    
    function st(a1,b1,c1,d1,e1,f1){
       var ow=a1.width();
       var repeat;
       var index=0;
       var len=b1.length;
          c1.hover(function(){
             clearInterval(repeat)
          },function(){
           repeat=setInterval(function(){
              index++;
              if(index==len)
              index=0;
              ht(index)
              },2000)
           }).trigger("mouseout");

         d1.mouseover(function(){
             index=d1.index(this);
             ht(index)
         });
 
         function ht(index){
            e1.stop().animate({"marginLeft":-ow*index});                  //.fadeIn().siblings().fadeOut();
            d1.eq(index).addClass(f1).siblings().removeClass(f1);
         };
       
    };
 //st($('.box_img'),$('.wid li'),$('.main'),$('.bg li'),$('.wid'),('h'));
    st($(".left_2 li"),$(".ul_w li"),$(".left_2"),$(".num1 li"),$(".ul_w"),("hbg"    ));
//margintop
       var oul_h=$(".banner_1 ul").height();
       //alert(oul_h)
       var repeat_1;
       var index=0;
       var ul_len=$(".banner_1 ul").length;
       //alert(ul_len)
          $(".left_2_2box").hover(function(){
             clearInterval(repeat)
          },function(){
           repeat=setInterval(function(){
              index++;
              if(index==ul_len)
              index=0;
              h_top(index)
              },2000)
           }).trigger("mouseout");

         $(".pbox2 li").mouseover(function(){
             index=$(".pbox2 li").index(this);
             h_top(index)
         });
 
         function h_top(index){
            $(".banner_1_h").stop().animate({"marginTop":-oul_h*index});                  //.fadeIn().siblings().fadeOut();
             $(".pbox2 li").eq(index).addClass("hbg1").siblings().removeClass("hbg1");
         };
         
         $(".tab_box li").mouseover(function(){
              var index= $(this).index();
              $(this).addClass("thbg").siblings().removeClass("thbg");
              $(".tab_dl dl").hide().eq(index).show();
        
        });
        
        $(".tab6 li").mouseover(function(){
              var index= $(this).index();
              $(this).addClass("hover").siblings().removeClass("hover");
              $(".main_6right_1 div").hide().eq(index).show();
        
        });

});

  1 /*!
  2  * jQuery Cookie Plugin v1.4.1
  3  * http://keleyi.com/keleyi/phtml/jqtexiao/25/js/jquery.cookie.js
  4  * Copyright 2013 Klaus Hartl
  5  * Released under the MIT license
  6  */
  7 (function (factory) {
  8     if (typeof define === 'function' && define.amd) {
  9         // AMD
 10         define(['jquery'], factory);
 11     } else if (typeof exports === 'object') {
 12         // CommonJS
 13         factory(require('jquery'));
 14     } else {
 15         // Browser globals
 16         factory(jQuery);
 17     }
 18 }(function ($) {
 19 
 20     var pluses = /+/g;
 21 
 22     function encode(s) {
 23         return config.raw ? s : encodeURIComponent(s);
 24     }
 25 
 26     function decode(s) {
 27         return config.raw ? s : decodeURIComponent(s);
 28     }
 29 
 30     function stringifyCookieValue(value) {
 31         return encode(config.json ? JSON.stringify(value) : String(value));
 32     }
 33 
 34     function parseCookieValue(s) {
 35         if (s.indexOf('"') === 0) {
 36             // This is a quoted cookie as according to RFC2068, unescape...
 37             s = s.slice(1, -1).replace(/\"/g, '"').replace(/\\/g, '\');
 38         }
 39 
 40         try {
 41             // Replace server-side written pluses with spaces.
 42             // If we can't decode the cookie, ignore it, it's unusable.
 43             // If we can't parse the cookie, ignore it, it's unusable.
 44             s = decodeURIComponent(s.replace(pluses, ' '));
 45             return config.json ? JSON.parse(s) : s;
 46         } catch(e) {}
 47     }
 48 
 49     function read(s, converter) {
 50         var value = config.raw ? s : parseCookieValue(s);
 51         return $.isFunction(converter) ? converter(value) : value;
 52     }
 53 
 54     var config = $.cookie = function (key, value, options) {
 55 
 56         // Write
 57 
 58         if (value !== undefined && !$.isFunction(value)) {
 59             options = $.extend({}, config.defaults, options);
 60 
 61             if (typeof options.expires === 'number') {
 62                 var days = options.expires, t = options.expires = new Date();
 63                 t.setTime(+t + days * 864e+5);
 64             }
 65 
 66             return (document.cookie = [
 67                 encode(key), '=', stringifyCookieValue(value),
 68                 options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
 69                 options.path    ? '; path=' + options.path : '',
 70                 options.domain  ? '; domain=' + options.domain : '',
 71                 options.secure  ? '; secure' : ''
 72             ].join(''));
 73         }
 74 
 75         // Read
 76 
 77         var result = key ? undefined : {};
 78 
 79         // To prevent the for loop in the first place assign an empty array
 80         // in case there are no cookies at all. Also prevents odd result when
 81         // calling $.cookie().
 82         var cookies = document.cookie ? document.cookie.split('; ') : [];
 83 
 84         for (var i = 0, l = cookies.length; i < l; i++) {
 85             var parts = cookies[i].split('=');
 86             var name = decode(parts.shift());
 87             var cookie = parts.join('=');
 88 
 89             if (key && key === name) {
 90                 // If second argument (value) is a function it's a converter...
 91                 result = read(cookie, value);
 92                 break;
 93             }
 94 
 95             // Prevent storing a cookie that we couldn't decode.
 96             if (!key && (cookie = read(cookie)) !== undefined) {
 97                 result[name] = cookie;
 98             }
 99         }
100 
101         return result;
102     };
103 
104     config.defaults = {};
105 
106     $.removeCookie = function (key, options) {
107         if ($.cookie(key) === undefined) {
108             return false;
109         }
110 
111         // Must not alter options, thus extending a fresh object...
112         $.cookie(key, '', $.extend({}, options, { expires: -1 }));
113         return !$.cookie(key);
114     };
115 
116 }));