jQuery+CSS3价格表插件代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3价格表插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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=gb2312" />
	<title>jQuery+CSS3价格表插件</title>
  	<script src="js/jquery-1.8.2.min.js"></script> 
    <script src="js/jquery.pricetable.min.js"></script>       
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/pricetable.css" rel="stylesheet" type="text/css">
    <link href="css/animate.css" rel="stylesheet" type="text/css">     
       
    <script type="text/javascript" charset="utf-8">	
	 $(document).ready(function() { 
		var pt = $('#priceTable1').priceTable();

		/* menu style chooser panel */
		$("#panel a.open").click(function(){
			var _left = $("#panel").css("margin-left");
			if (_left == "-210px"){
				$("#panel").stop(true, true).animate({marginLeft: "-10px"}, 300);
			}else{
				$("#panel").stop(true, true).animate({marginLeft: "-210px"}, 300);
			}
			return false;
		})

		// $('#panel').on('mouseleave', function(event){
		// 	$("#panel").stop(true, true).animate({marginLeft: "-210px"}, 300);			
		// })

		var colorStyle = 'greenStyle';
		$('select#theColor').change(function () { 
			var _c1 = $(this).children(":selected").val();
			$('#priceTable1').removeClass(colorStyle).addClass(_c1);
			$("#panel").stop(true, true).animate({marginLeft: "-210px"}, 300);			
			colorStyle = _c1;
		});	

		$('select#theAnimation').change(function () { 
			var _a = $(this).children(":selected").val();
			pt.changeAnimate(_a);
			$("#panel").stop(true, true).animate({marginLeft: "-210px"}, 300);			
			
		});	

		

	 });
    </script> 


	<style type="text/css" media="screen">
		#wrapper{              
			width: 1000px;     
			margin: 0 auto;
			margin-bottom: 40px;
		} 	

		#panel {
			position: fixed;
			top: 100px;
			z-index: 1200;
		}
		#panelContainer {
			float: left;
			font-size: 12px;
			width: 170px;
			height: 140px;
			padding: 20px;
			color: #CCC;			
			background: #333;
		}
		.open{
			background: url(images/panelbutton.png) no-repeat 0 0 transparent;
			display: block;
			height: 180px;
			width: 34px;
			float: right;
			z-index: 999;
		}
		#panelContainer select{
			margin-bottom: 40px;
		}
		#panelContainer select, #panelContainer select:focus {
			width: 100%;
			padding: 3px;
			margin: 10px 0 15px 0;	
			font-size: 12px;
			border: none;
		}
	</style>
	
</head>

<body>
<div id="wrapper">
	
<ul class="priceTable greenStyle" id="priceTable1">
	<li class="priceItem">
		<ul>
			<li class="header">Basic</li>
			<li>&lt;== Change style</li>
			<li data-animate="tada"><span class="price">$12</span>/mo</li>
			<li>&lt;== Change animation</li>			
			<li>Max size of file: 100M</li>
			<li><span class="strong green">5 GB</span> Storage</li>
			<li>24/7 Free Support</li>			
			<li class="button"><a href="#">Hello Button</a></li>			
		</ul>		
	</li>
	<li class="priceItem active">
		<ul class="badge">
			<li class="header">Recommand</li>
			<li data-animate="rotateIn">Pre defined animation</li>
			<li><span class="price">$150</span>/year</li>
			<li>Unlimited bandwidth</li>
			<li>Max size of file: 500M</li>
			<li><span class="strong blue">10 GB</span> Storage</li>
			<li>24/7 Free Support</li>			
			<li class="button"><a href="#">Sign Up</a></li>			
		</ul>				
	</li>
	<li class="priceItem">
		<ul>
			<li class="header">More Power</li>
			<li data-animate="lightSpeedIn">Pre defined Animation</li>
			<li><span class="price">$30</span>/mo</li>
			<li>Unlimited bandwidth</li>
			<li>Max size of file: 1GB</li>
			<li><span class="strong red">20 GB</span> Storage</li>
			<li>24/7 Free Support</li>			
			<li class="button"><a href="#">Sign Up</a></li>			
		</ul>				
	</li>
	<li class="priceItem">
		<ul>
			<li class="header" data-animate="bounceInDown">Prefessional</li>
			<li data-animate="bounceInDown">Fixed Animation</li>
			<li data-animate="bounceInDown"><span class="price">$40</span>/mo</li>
			<li data-animate="bounceInDown">Unlimited bandwidth</li>
			<li data-animate="bounceInDown">Max size of file: Unlimited</li>
			<li data-animate="bounceInDown"><span class="strong pink">40 GB</span> Storage</li>
			<li data-animate="bounceInDown">24/7 Free Support</li>			
			<li data-animate="bounceInDown" class="button"><a href="#">Long Button Here</a></li>			
		</ul>				
	</li>
</ul>
   
</div>


<!-- Menu style chooser --> 
<div id="panel" style="margin-left:-210px;">
	<div id="panelContainer">
		<strong>Change Button/Lable Style</strong> <br />
		<select id="theColor" autocomplete="off">
		  	<option value="blueStyle">Blue Style</option>
		  	<option value="lightBlueStyle">Light Blue Style</option>		  		  
			<option value="darkBlueStyle">Dark Blue Style</option>		  		  		  	
		  	<option value="pinkStyle">Pink Style</option>		  
		  	<option value="greenStyle" selected="selected">Green Style</option>
		  	<option value="redStyle">Red Style</option>
			<option value="greyStyle">Grey Style</option>		  
			<option value="blackStyle">Black Style</option>		  			
		</select>

		<strong>Change Global Animation</strong> <br />
		<select id="theAnimation" autocomplete="off">
		  	<option value="fadeIn" selected="selected">fadeIn</option>
			<option value="fadeInLeft">fadeInLeft</option>		  
			<option value="fadeInRight">fadeInRight</option>		  			
			<option value="fadeInUp">fadeInUp</option>		  			
			<option value="fadeInDown">fadeInDown</option>	
			<option value="fadeInLeftBig">fadeInLeftBig</option>		  
			<option value="fadeInRightBig">fadeInRightBig</option>		  
			<option value="fadeInUpBig">fadeInUpBig</option>		  			
			<option value="fadeInDownBig">fadeInDownBig</option>	
		  	<option value="bounceIn">bounceIn</option>
			<option value="bounceInLeft">bounceInLeft</option>		  
			<option value="bounceInRight">bounceInRight</option>		  	
			<option value="bounceInUp">bounceInUp</option>		  			
			<option value="bounceInDown">bounceInDown</option>
			<option value="shake">shake</option>							
			<option value="tada">tada</option>							
			<option value="swing">swing</option>							
			<option value="wobble">wobble</option>							
			<option value="wiggle">wiggle</option>							
			<option value="pulse">pulse</option>					
			<option value="flipInX">flipInX</option>							
			<option value="flipInY">flipInY</option>							
			<option value="rotateIn">rotateIn</option>						
			<option value="rotateInDownLeft">rotateInDownLeft</option>		
			<option value="rotateInDownRight">rotateInDownRight</option>		
			<option value="rotateInUpLeft">rotateInUpLeft</option>			
			<option value="rotateInUpRight">rotateInUpRight</option>			
			<option value="lightSpeedIn">lightSpeedIn</option>				
			<option value="rollIn">rollIn</option>				
		</select>

	</div>
	<a class="open" href="#"></a>
</div>
</body>
</html>

JS代码(jquery.pricetable.min.js):

var _0x640c=["\x70\x72\x69\x63\x65\x54\x61\x62\x6C\x65","\x66\x6E","\x77\x6F\x62\x62\x6C\x65","\x65\x78\x74\x65\x6E\x64","\x63\x68\x61\x6E\x67\x65\x41\x6E\x69\x6D\x61\x74\x65","\x65\x61\x73\x65\x49\x6E","\x73\x69\x7A\x65","\x2E\x70\x72\x69\x63\x65\x49\x74\x65\x6D","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x68\x61\x73\x43\x6C\x61\x73\x73","\x6F\x64\x64","\x61\x64\x64\x43\x6C\x61\x73\x73","\x65\x76\x65\x6E","\x65\x61\x63\x68","\x6C\x69","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x62\x75\x74\x74\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x64\x61\x74\x61","\x20","\x6F\x6E","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65"];
	(function (_0x2fd0x1){
	_0x2fd0x1[_0x640c[1]][_0x640c[0]]=function (_0x2fd0x2){
	var _0x2fd0x3={
	easeIn:_0x640c[2]}
;
	_0x2fd0x2&&_0x2fd0x1[_0x640c[3]](_0x2fd0x3,_0x2fd0x2);
	this[_0x640c[4]]=function (_0x2fd0x1){
	_0x2fd0x3[_0x640c[5]]=_0x2fd0x1;
}
;
	var _0x2fd0x4;
	this[_0x640c[8]](_0x640c[7])[_0x640c[6]]();
	this[_0x640c[8]](_0x640c[7])[_0x640c[14]](function (){
	_0x2fd0x1(this)[_0x640c[10]](_0x640c[9])&&(_0x2fd0x4=_0x2fd0x1(this));
	_0x2fd0x1(this)[_0x640c[16]]()[_0x640c[8]](_0x640c[15])[_0x640c[14]](function (_0x2fd0x5){
	_0x2fd0x5%2?_0x2fd0x1(this)[_0x640c[12]](_0x640c[11]):_0x2fd0x1(this)[_0x640c[12]](_0x640c[13]);
}
);
	_0x2fd0x1(this)[_0x640c[23]](_0x640c[17],function (){
	_0x2fd0x4[_0x640c[18]](_0x640c[9]);
	_0x2fd0x1(this)[_0x640c[16]]()[_0x640c[8]](_0x640c[15])[_0x640c[14]](function (_0x2fd0x5){
	if(!_0x2fd0x1(this)[_0x640c[10]](_0x640c[19])){
	var _0x2fd0x4=_0x2fd0x1(this)[_0x640c[21]](_0x640c[20])||_0x2fd0x3[_0x640c[5]];
	_0x2fd0x1(this)[_0x640c[12]](_0x640c[20]+_0x2fd0x5+_0x640c[22]+_0x2fd0x4);
}
;
}
);
}
);
	_0x2fd0x1(this)[_0x640c[23]](_0x640c[24],function (){
	_0x2fd0x4[_0x640c[12]](_0x640c[9]);
	_0x2fd0x1(this)[_0x640c[16]]()[_0x640c[8]](_0x640c[15])[_0x640c[14]](function (){
	var _0x2fd0x4=_0x2fd0x1(this)[_0x640c[21]](_0x640c[20])||_0x2fd0x3[_0x640c[5]];
	_0x2fd0x1(this)[_0x640c[18]](_0x2fd0x4);
}
);
}
);
}
);
	return this;
}
;
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)