以下是 jQuery样式切换器插件switcher js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>jQuery样式切换器插件switcher</title>
<!-- Mobile Specific
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/boxed.css" id="layout">
<link rel="stylesheet" type="text/css" href="css/colors/green.css" id="colors">
<!-- Java Script
================================================== -->
<script src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/switcher.css">
<script src="js/switcher.js"></script>
</head>
<body>
<div id="style-switcher">
<h2>Jquery样式切换器<a href="#"></a></h2>
<div>
<h3>预定义的颜色</h3>
<ul class="colors" id="color1">
<li><a href="#" class="green" title="Green"></a></li>
<li><a href="#" class="blue" title="Blue"></a></li>
<li><a href="#" class="orange" title="Orange"></a></li>
<li><a href="#" class="navy" title="Navy"></a></li>
<li><a href="#" class="yellow" title="Yellow"></a></li>
<li><a href="#" class="peach" title="Peach"></a></li>
<li><a href="#" class="beige" title="Beige"></a></li>
<li><a href="#" class="purple" title="Purple"></a></li>
<li><a href="#" class="red" title="Red"></a></li>
<li><a href="#" class="pink" title="Pink"></a></li>
<li><a href="#" class="celadon" title="Celadon"></a></li>
<li><a href="#" class="brown" title="Brown"></a></li>
<li><a href="#" class="cherry" title="Cherry"></a></li>
<li><a href="#" class="gray" title="Gray"></a></li>
<li><a href="#" class="dark" title="Dark"></a></li>
<li><a href="#" class="cyan" title="Cyan"></a></li>
<li><a href="#" class="olive" title="Olive"></a></li>
<li><a href="#" class="dirty-green" title="Dirty Green"></a></li>
</ul>
<h3>布局风格</h3>
<div class="layout-style">
<select id="layout-switcher">
<option value="css/boxed">Boxed</option>
<option value="css/wide">Wide</option>
</select>
</div>
<h3>背景图片</h3>
<ul class="colors bg" id="bg">
<li><a href="#" class="bg1"></a></li>
<li><a href="#" class="bg2"></a></li>
<li><a href="#" class="bg3"></a></li>
<li><a href="#" class="bg4"></a></li>
<li><a href="#" class="bg5"></a></li>
<li><a href="#" class="bg6"></a></li>
<li><a href="#" class="bg7"></a></li>
<li><a href="#" class="bg8"></a></li>
<li><a href="#" class="bg9"></a></li>
<li><a href="#" class="bg10"></a></li>
<li><a href="#" class="bg11"></a></li>
<li><a href="#" class="bg12"></a></li>
<li><a href="#" class="bg13"></a></li>
<li><a href="#" class="bg14"></a></li>
<li><a href="#" class="bg15"></a></li>
<li><a href="#" class="bg16"></a></li>
<li><a href="#" class="bg17"></a></li>
<li><a href="#" class="bg18"></a></li>
</ul>
<h3>背景颜色</h3>
<ul class="colors bgsolid" id="bgsolid">
<li><a href="#" class="green-bg" title="Green"></a></li>
<li><a href="#" class="blue-bg" title="Blue"></a></li>
<li><a href="#" class="orange-bg" title="Orange"></a></li>
<li><a href="#" class="navy-bg" title="Navy"></a></li>
<li><a href="#" class="yellow-bg" title="Yellow"></a></li>
<li><a href="#" class="peach-bg" title="Peach"></a></li>
<li><a href="#" class="beige-bg" title="Beige"></a></li>
<li><a href="#" class="purple-bg" title="Purple"></a></li>
<li><a href="#" class="red-bg" title="Red"></a></li>
<li><a href="#" class="pink-bg" title="Pink"></a></li>
<li><a href="#" class="celadon-bg" title="Celadon"></a></li>
<li><a href="#" class="brown-bg" title="Brown"></a></li>
<li><a href="#" class="cherry-bg" title="Cherry"></a></li>
<li><a href="#" class="gray-bg" title="Gray"></a></li>
<li><a href="#" class="dark-bg" title="Dark"></a></li>
<li><a href="#" class="cyan-bg" title="Cyan"></a></li>
<li><a href="#" class="olive-bg" title="Olive"></a></li>
<li><a href="#" class="dirty-green-bg" title="Dirty Green"></a></li>
</ul>
</div>
<div id="reset"><a href="#" class="button color green boxed">重置</a></div>
</div>
</body>
</html>JS代码(switcher.js):
/*-----------------------------------------------------------------------------------/* Styles Switcher-----------------------------------------------------------------------------------*/
window.console = window.console || (function(){
var c ={
}
;
c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){
}
;
return c;
}
)();
jQuery(document).ready(function($){
// Color Changer$(".green" ).click(function(){
$("#colors" ).attr("href","css/colors/green.css" );
return false;
}
);
$(".blue" ).click(function(){
$("#colors" ).attr("href","css/colors/blue.css" );
return false;
}
);
$(".orange" ).click(function(){
$("#colors" ).attr("href","css/colors/orange.css" );
return false;
}
);
$(".navy" ).click(function(){
$("#colors" ).attr("href","css/colors/navy.css" );
return false;
}
);
$(".yellow" ).click(function(){
$("#colors" ).attr("href","css/colors/yellow.css" );
return false;
}
);
$(".peach" ).click(function(){
$("#colors" ).attr("href","css/colors/peach.css" );
return false;
}
);
$(".beige" ).click(function(){
$("#colors" ).attr("href","css/colors/beige.css" );
return false;
}
);
$(".purple" ).click(function(){
$("#colors" ).attr("href","css/colors/purple.css" );
return false;
}
);
$(".red" ).click(function(){
$("#colors" ).attr("href","css/colors/red.css" );
return false;
}
);
$(".pink" ).click(function(){
$("#colors" ).attr("href","css/colors/pink.css" );
return false;
}
);
$(".celadon" ).click(function(){
$("#colors" ).attr("href","css/colors/celadon.css" );
return false;
}
);
$(".brown" ).click(function(){
$("#colors" ).attr("href","css/colors/brown.css" );
return false;
}
);
$(".cherry" ).click(function(){
$("#colors" ).attr("href","css/colors/cherry.css" );
return false;
}
);
$(".gray" ).click(function(){
$("#colors" ).attr("href","css/colors/gray.css" );
return false;
}
);
$(".dark" ).click(function(){
$("#colors" ).attr("href","css/colors/dark.css" );
return false;
}
);
$(".cyan" ).click(function(){
$("#colors" ).attr("href","css/colors/cyan.css" );
return false;
}
);
$(".olive" ).click(function(){
$("#colors" ).attr("href","css/colors/olive.css" );
return false;
}
);
$(".dirty-green" ).click(function(){
$("#colors" ).attr("href","css/colors/dirty-green.css" );
return false;
}
);
// Layout Switcher$(".boxed" ).click(function(){
$("#layout" ).attr("href","css/boxed.css" );
return false;
}
);
$("#layout-switcher").on('change',function(){
$('#layout').attr('href',$(this).val() + '.css');
}
);
;
// Style Switcher$('#style-switcher').animate({
left:'-195px'}
);
$('#style-switcher h2 a').click(function(e){
e.preventDefault();
var div = $('#style-switcher');
console.log(div.css('left'));
if (div.css('left') === '-195px'){
$('#style-switcher').animate({
left:'0px'}
);
}
else{
$('#style-switcher').animate({
left:'-195px'}
);
}
}
)$('.colors li a').click(function(e){
e.preventDefault();
$(this).parent().parent().find('a').removeClass('active');
$(this).addClass('active');
}
)$('.bg li a').click(function(e){
e.preventDefault();
$(this).parent().parent().find('a').removeClass('active');
$(this).addClass('active');
var bg = $(this).css('backgroundImage');
$('body').css('backgroundImage',bg)}
)$('.bgsolid li a').click(function(e){
e.preventDefault();
$(this).parent().parent().find('a').removeClass('active');
$(this).addClass('active');
var bg = $(this).css('backgroundColor');
$('body').css('backgroundColor',bg).css('backgroundImage','none')}
)$('#reset a').click(function(e){
var bg = $(this).css('backgroundImage');
$('body').css('backgroundImage','url(./images/bg/noise.png)')}
)}
);
CSS代码(base.css):
/** Skeleton V1.2* Copyright 2011,Dave Gamache* www.getskeleton.com* Free to use under the MIT license.* http://www.opensource.org/licenses/mit-license.php* 6/20/2012*/
/* #Reset & Basics (Inspired by E. Meyers)================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
code{padding:3px 6px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;background:#fcfcfc;border:1px solid #e4e4e4;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#3f8faf;}
/* Basic Alginment================================================== */
.columns img,.column img{height:auto;max-width:100%;}
.columns.google-map img{max-width:none;}
img,object,video{height:auto;display:block;}
img{width:auto;border:0;-ms-interpolation-mode:bicubic;}
/* Flexible Embeds */
.embed{position:relative;padding:0px;padding-bottom:56.25%;/* 16/9 ratio */
height:0;overflow:hidden;}
.embed iframe,.embed object,.embed embed{position:absolute;top:0;left:0;width:100%;height:100%;}
.image-left{float:left;margin:0 15px 8px 0;}
.image-right{float:right;margin:0 0 8px 15px;}
.image-right,.image-left{padding:4px;border:1px solid #ddd;max-width:100%;-webkit-box-shadow:0px 1px 1px 0px rgba(180,180,180,0.1);box-shadow:0px 1px 1px 0px rgba(180,180,180,0.1);}
/* #Typography================================================== */
h1,h2,h3,h4,h5,h6{color:#333;font-family:Arial,sans-serif;font-weight:bold;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit;}
h1{font-size:28px;line-height:50px;}
h2{font-size:22px;line-height:30px;}
h3{font-size:16px;line-height:34px;}
h4{font-size:14px;line-height:30px;}
h5{font-size:12px;line-height:24px;}
h6{font-size:10px;line-height:21px;}
p{margin:0 0 15px 0;line-height:20px;}
p img{margin:0;}
p.lead{font-size:21px;line-height:27px;color:#777;}
em{font-style:italic;}
strong{font-weight:bold;color:#333;}
small{font-size:80%;}
hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:10px 0 30px;height:0;}
/* #Links================================================== */
a,a:visited{color:#5ca20d;text-decoration:none;outline:0;-webkit-transition:color 0.1s ease-in-out;-moz-transition:color 0.1s ease-in-out;-o-transition:color 0.1s ease-in-out;-transition:color 0.1s ease-in-out;}
a:hover,a:focus{color:#888;}
p a,p a:visited{line-height:inherit;}
/* #Lists================================================== */
ul,ol{margin:0;}
ul{list-style:none outside;}
ol{list-style:decimal;}
ol,ul.square,ul.circle,ul.disc{margin-left:30px;}
ul.square{list-style:square outside;}
ul.circle{list-style:circle outside;}
ul.disc{list-style:disc outside;}
ul ul,ul ol,ol ol,ol ul{}
ul ul li,ul ol li,ol ol li,ol ul li{}
li{line-height:18px;}
ul.large li{line-height:21px;}
li p{line-height:21px;}
/* #Forms================================================== */
fieldset{margin-bottom:20px;}
input[type="text"],input[type="password"],input[type="email"],textarea,select{border:1px solid #d8d8d8;padding:9px;outline:none;font:12px Arial,sans-serif;color:#888;margin:0;max-width:100%;display:block;background:#fff;-webkit-box-shadow:0px 1px 1px 0px rgba(180,180,180,0.1);box-shadow:0px 1px 1px 0px rgba(180,180,180,0.1);}
select{padding:0;}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{border:1px solid #ccc;color:#666;}
textarea{min-height:60px;}
label,legend{display:block;font-weight:bold;font-size:12px;font-weight:normal;margin-bottom:8px;}
select{}
input[type="checkbox"]{display:inline;}
label span,legend span{font-weight:normal;font-size:13px;color:#444;}
/* #Misc================================================== */
.remove-bottom{margin-bottom:0 !important;}
.half-bottom{margin-bottom:10px !important;}
.add-bottom{margin-bottom:20px !important;}
CSS代码(boxed.css):
/* =================================================================== */
/* Boxed Layout====================================================================== */
body{background:url(../images/bg/noise.png);font:12px Arial,sans-serif;color:#666;-webkit-font-smoothing:antialiased;/* Fix for webkit rendering */
-webkit-text-size-adjust:100%;overflow-x:hidden;}
#wrapper{background:#fff;-webkit-box-shadow:0px 0px 6px 0px rgba(0,0,0,0.2);box-shadow:0px 0px 6px 0px rgba(0,0,0,0.2);width:960px;padding:40px 35px 35px 35px;margin:50px auto 0 auto;}
#footer{background:#303030;width:960px;padding:15px 35px 0px 35px;margin:0 auto 50px auto;}
/* Smaller than standard 1029 (devices and browsers)====================================================================== */
@media only screen and (max-width:1029px){#wrapper{margin:0 auto;padding:25px 0 30px 0;-webkit-box-shadow:none;box-shadow:none;width:100%;}
body{background:#fff}
#footer{margin:0 auto;padding:15px 0 0 0;width:100% !important;}
}
/* Tablet Portrait (devices and browsers)====================================================================== */
@media only screen and (min-width:768px) and (max-width:959px){#footer{padding:10px 0 0 0;}
}
/* All Mobile Sizes (devices and browser)====================================================================== */
@media only screen and (max-width:767px){#wrapper{margin:0 auto;padding:15px 0 30px 0;-webkit-box-shadow:none;box-shadow:none;}
body{background:#fff}
#footer{margin:0 auto;padding:15px 0 0 0;width:100% !important;}
}
分享到QQ
分享到微博
微信扫一扫
