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 }));