可自定义抖动频率jQuery插件js代码

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

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

以下是可自定义抖动频率jQuery插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可自定义抖动频率jQuery插件jRumble</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--[if IE]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="container">
	<div id="content">
		<h2 id="demos">Demos</h2>
			
			<h3>Ranges</h3>
			
			<div class="demo-box">
				<h4>rangeX: 2<br/>rangeY: 2<br/>rangeRot: 1</h4>
				<div id="demo1">1</div>
			</div>
			
			<div class="demo-box">
				<h4>rangeX: 10<br/>rangeY: 10<br/>rangeRot: 4</h4>
				<div id="demo2">2</div>
			</div>
			
			<div class="demo-box">
				<h4>rangeX: 4<br/>rangeY: 0<br/>rangeRot: 0</h4>
				<div id="demo3">3</div>
			</div>
			
			<div class="demo-box last">
				<h4>rangeX: 0<br/>rangeY: 0<br/>rangeRot: 5</h4>
				<div id="demo4">4</div>
			</div>
			
			<div class="view-source">
				<a href="#">View Source</a>
				<pre><code>
$('#demo1').jrumble({
	rangeX: 2,
	rangeY: 2,
	rangeRot: 1
});

$('#demo2').jrumble({
	rangeX: 10,
	rangeY: 10,
	rangeRot: 4
});

$('#demo3').jrumble({
	rangeX: 4,
	rangeY: 0,
	rangeRot: 0
});

$('#demo4').jrumble({
	rangeX: 0,
	rangeY: 0,
	rangeRot: 5
});
				</code></pre>
			</div>
			
			<h3>Rumble Speeds</h3>
			
			<div class="demo-box">
				<h4>0</h4>
				<div id="demo5">5</div>
			</div>
			
			<div class="demo-box">
				<h4>50</h4>
				<div id="demo6">6</div>
			</div>
			
			<div class="demo-box">
				<h4>100</h4>
				<div id="demo7">7</div>
			</div>
			
			<div class="demo-box last">
				<h4>200</h4>
				<div id="demo8">8</div>
			</div>
			
			<div class="view-source">
				<a href="#">View Source</a>
				<pre><code>
$('#demo5').jrumble({
	rumbleSpeed: 0
});

$('#demo6').jrumble({
	rumbleSpeed: 50
});

$('#demo7').jrumble({
	rumbleSpeed: 100
});

$('#demo8').jrumble({
	rumbleSpeed: 200
});
				</code></pre>
			</div>
			
			<h3>Event Types</h3>
			
			<div class="demo-box">
				<h4>Hover</h4>
				<div id="demo9">9</div>
			</div>
			
			<div class="demo-box">
				<h4>Click</h4>
				<div id="demo10">10</div>
			</div>
			
			<div class="demo-box">
				<h4>Mousedown</h4>
				<div id="demo11">11</div>
			</div>
			
			<div class="demo-box last">
				<h4>Constant</h4>
				<div id="demo12">12</div>
			</div>
			
			<div class="view-source">
				<a href="#">View Source</a>
				<pre><code>
$('#demo9').jrumble({
	rumbleEvent: 'hover'
});

$('#demo10').jrumble({
	rumbleEvent: 'click'
});

$('#demo11').jrumble({
	rumbleEvent: 'mousedown'
});

$('#demo12').jrumble({
	rumbleEvent: 'constant'
});
				</code></pre>
			</div>			
			
		<h3>Absolute Positioning (Fixed positioning uses the same concept)</h3>
			
			<div id="position-box">
				<div class="demo-box" id="demo13">
					<h4>posX: 'left'<br/>posY: 'top'</h4>
					<div>13</div>
				</div>
				
				<div class="demo-box" id="demo14">
					<h4>posX: 'right'<br/>posY: 'top'</h4>
					<div>14</div>
				</div>
				
				<div class="demo-box" id="demo15">
					<h4>posX: 'left'<br/>posY: 'bottom'</h4>
					<div>15</div>
				</div>
				
				<div class="demo-box last" id="demo16">
					<h4>posX: 'right'<br/>posY: 'bottom'</h4>
					<div>16</div>
				</div>
			</div>
			
			<div class="view-source">
				<a href="#">View Source</a>
				<pre><code>
$('#demo13').jrumble({
	posX: 'left',
	posY: 'top'
});

$('#demo14').jrumble({
	posX: 'right',
	posY: 'top'
});

$('#demo15').jrumble({
	posX: 'left',
	posY: 'bottom'
});

$('#demo16').jrumble({
	posX: 'right',
	posY: 'bottom'
});
				</code></pre>
		</div>		
		
		<h2 id="documentation">Documentation</h2>
			<h3>Options/Defaults</h3>
			<table id="options">
				<thead>
					<tr>
						<th>Option</th>
						<th>Default</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><strong>rangeX</strong></td>
						<td><em>2</em></td>
						<td>Set the horizontal rumble range (pixels)</td>
					</tr>
					<tr>
						<td><strong>rangeY</strong></td>
						<td><em>2</em></td>
						<td>Set the vertical rumble range (pixels)</td>
					</tr>
					<tr>
						<td><strong>rangeRot</strong></td>
						<td><em>1</em></td>
						<td>Set the rotation range (degrees)</td>
					</tr>
					<tr>
						<td><strong>rumbleSpeed</strong></td>
						<td><em>10</em></td>
						<td>Set the speed/frequency in milliseconds of the rumble (lower number = faster)</td>
					</tr>
					<tr>
						<td><strong>rumbleEvent</strong></td>
						<td><em>'hover'</em></td>
						<td>Set the event that triggers the rumble (<em>'hover'</em>, <em>'click'</em>, <em>'mousedown'</em>, <em>'constant'</em>)</td>
					</tr>
					<tr>
						<td><strong>posX</strong></td>
						<td><em>'left'</em></td>
						<td>If using jRumble on a fixed or absolute positioned element, choose <em>'left'</em> or <em>'right'</em> to match your CSS</td>
					</tr>
					<tr>
						<td><strong>posY</strong></td>
						<td><em>'top'</em></td>
						<td>If using jRumble on a fixed or absolute positioned element, choose <em>'top'</em> or <em>'bottom'</em> to match your CSS</td>
					</tr>
				</tbody>
			</table>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jrumble.js"></script>
<script type="text/javascript">
$(document).ready(function(){						   	
	$('#demo1').jrumble({
		rangeX: 2,
		rangeY: 2,
		rangeRot: 1
	});
	
	$('#demo2').jrumble({
		rangeX: 10,
		rangeY: 10,
		rangeRot: 4
	});
	
	$('#demo3').jrumble({
		rangeX: 4,
		rangeY: 0,
		rangeRot: 0
	});
	
	$('#demo4').jrumble({
		rangeX: 0,
		rangeY: 0,
		rangeRot: 5
	});
	
	$('#demo5').jrumble({
		rumbleSpeed: 0
	});
	
	$('#demo6').jrumble({
		rumbleSpeed: 50
	});
	
	$('#demo7').jrumble({
		rumbleSpeed: 100
	});
	
	$('#demo8').jrumble({
		rumbleSpeed: 200
	});
	
	$('#demo9').jrumble({
		rumbleEvent: 'hover'
	});
	
	$('#demo10').jrumble({
		rumbleEvent: 'click'
	});
	
	$('#demo11').jrumble({
		rumbleEvent: 'mousedown'
	});
	
	$('#demo12').jrumble({
		rumbleEvent: 'constant'
	});	
	
	$('#demo13').jrumble({
		posX: 'left',
		posY: 'top'
	});
	
	$('#demo14').jrumble({
		posX: 'right',
		posY: 'top'
	});
	
	$('#demo15').jrumble({
		posX: 'left',
		posY: 'bottom'
	});
	
	$('#demo16').jrumble({
		posX: 'right',
		posY: 'bottom'
	});		
	
	$('.view-source pre').hide();
	$('.view-source a').toggle(function(){
		$(this).siblings('pre').stop(false, true).slideDown(500);
		$(this).html('Hide Source');
	}, function(){
		$(this).siblings('pre').stop(false, true).slideUp(500);
		$(this).html('View Source');
	});
});
</script>
</body>
</html>

JS代码(jquery-jrumble.js):

(function($){
	$.fn.jrumble = function(options){
	// JRUMBLE OPTIONS//---------------------------------var defaults ={
	rangeX:2,rangeY:2,rangeRot:1,rumbleSpeed:10,rumbleEvent:'hover',posX:'left',posY:'top'}
;
	var opt = $.extend(defaults,options);
	return this.each(function(){
	// VARIABLE DECLARATION//---------------------------------$obj = $(this);
	var rumbleInterval;
	var rangeX = opt.rangeX;
	var rangeY = opt.rangeY;
	var rangeRot = opt.rangeRot;
	rangeX = rangeX*2;
	rangeY = rangeY*2;
	rangeRot = rangeRot*2;
	var rumbleSpeed = opt.rumbleSpeed;
	var objPosition = $obj.css('position');
	var objXrel = opt.posX;
	var objYrel = opt.posY;
	var objXmove;
	var objYmove;
	var inlineChange;
	// SET POSITION RELATION IF CHANGED//---------------------------------if(objXrel === 'left'){
	objXmove = parseInt($obj.css('left'),10);
}
if(objXrel === 'right'){
	objXmove = parseInt($obj.css('right'),10);
}
if(objYrel === 'top'){
	objYmove = parseInt($obj.css('top'),10);
}
if(objYrel === 'bottom'){
	objYmove = parseInt($obj.css('bottom'),10);
}
// RUMBLER FUNCTION//---------------------------------function rumbler(elem){
	var randBool = Math.random();
	var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2;
	var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2;
	var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2;
	// IF INLINE,MAKE INLINE-BLOCK FOR ROTATION//---------------------------------if(elem.css('display') === 'inline'){
	inlineChange = true;
	elem.css('display','inline-block')}
// ENSURE MOVEMENT//---------------------------------if(randX === 0 && rangeX !== 0){
	if(randBool < .5){
	randX = 1;
}
else{
	randX = -1;
}
}
if(randY === 0 && rangeY !== 0){
	if(randBool < .5){
	randY = 1;
}
else{
	randY = -1;
}
}
// RUMBLE BASED ON POSITION//---------------------------------if(objPosition === 'absolute'){
	elem.css({
	'position':'absolute','-webkit-transform':'rotate('+randRot+'deg)','-moz-transform':'rotate('+randRot+'deg)','-o-transform':'rotate('+randRot+'deg)','transform':'rotate('+randRot+'deg)'}
);
	elem.css(objXrel,objXmove+randX+'px');
	elem.css(objYrel,objYmove+randY+'px');
}
if(objPosition === 'fixed'){
	elem.css({
	'position':'fixed','-webkit-transform':'rotate('+randRot+'deg)','-moz-transform':'rotate('+randRot+'deg)','-o-transform':'rotate('+randRot+'deg)','transform':'rotate('+randRot+'deg)'}
);
	elem.css(objXrel,objXmove+randX+'px');
	elem.css(objYrel,objYmove+randY+'px');
}
if(objPosition === 'static' || objPosition === 'relative'){
	elem.css({
	'position':'relative','-webkit-transform':'rotate('+randRot+'deg)','-moz-transform':'rotate('+randRot+'deg)','-o-transform':'rotate('+randRot+'deg)','transform':'rotate('+randRot+'deg)'}
);
	elem.css(objXrel,randX+'px');
	elem.css(objYrel,randY+'px');
}
}
// End rumbler function// EVENT TYPES (rumbleEvent)//---------------------------------var resetRumblerCSS ={
	'position':objPosition,'-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)','-o-transform':'rotate(0deg)','transform':'rotate(0deg)'}
;
	if(opt.rumbleEvent === 'hover'){
	$obj.hover(function(){
	var rumblee = $(this);
	rumbleInterval = setInterval(function(){
	rumbler(rumblee);
}
,rumbleSpeed);
}
,function(){
	var rumblee = $(this);
	clearInterval(rumbleInterval);
	rumblee.css(resetRumblerCSS);
	rumblee.css(objXrel,objXmove+'px');
	rumblee.css(objYrel,objYmove+'px');
	if(inlineChange === true){
	rumblee.css('display','inline');
}
}
);
}
if(opt.rumbleEvent === 'click'){
	$obj.toggle(function(){
	var rumblee = $(this);
	rumbleInterval = setInterval(function(){
	rumbler(rumblee);
}
,rumbleSpeed);
}
,function(){
	var rumblee = $(this);
	clearInterval(rumbleInterval);
	rumblee.css(resetRumblerCSS);
	rumblee.css(objXrel,objXmove+'px');
	rumblee.css(objYrel,objYmove+'px');
	if(inlineChange === true){
	rumblee.css('display','inline');
}
}
);
}
if(opt.rumbleEvent === 'mousedown'){
	$obj.bind({
	mousedown:function(){
	var rumblee = $(this);
	rumbleInterval = setInterval(function(){
	rumbler(rumblee);
}
,rumbleSpeed);
}
,mouseup:function(){
	var rumblee = $(this);
	clearInterval(rumbleInterval);
	rumblee.css(resetRumblerCSS);
	rumblee.css(objXrel,objXmove+'px');
	rumblee.css(objYrel,objYmove+'px');
	if(inlineChange === true){
	rumblee.css('display','inline');
}
}
,mouseout:function(){
	var rumblee = $(this);
	clearInterval(rumbleInterval);
	rumblee.css(resetRumblerCSS);
	rumblee.css(objXrel,objXmove+'px');
	rumblee.css(objYrel,objYmove+'px');
	if(inlineChange === true){
	rumblee.css('display','inline');
}
}
}
);
}
if(opt.rumbleEvent === 'constant'){
	var rumblee = $(this);
	rumbleInterval = setInterval(function(){
	rumbler(rumblee);
}
,rumbleSpeed);
}
}
);
}
;
}
)(jQuery);

CSS代码(style.css):

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
body{background:#fff;color:#666;font:100%/1.5 Arial,Helvetica,sans-serif;}
#container{background:#fff;margin:0 auto;width:580px;}
#content{padding:40px 0;width:580px;}
h2{background:#0cf;clear:both;color:#fff;font-size:20px;font-weight:bold;margin:60px 0 10px 0;padding:10px 20px;text-shadow:-1px 1px 0px rgba(0,0,0,.2);}
h2:first-child{margin:0 0 10px 0;}
h3{border-bottom:1px dotted #ddd;clear:both;font-size:15px;font-weight:bold;margin:15px 0 6px;}
h4{font-size:12px;font-weight:normal;margin:0 0 5px 0;}
p{font-size:12px;margin:0 0 20px;}
ul{font-size:12px;list-style:square;margin:0 0 0 16px;}
strong{font-weight:bold;}
em{font-style:italic;}
strong em,em strong{font-weight:bold;font-style:italic;}
pre{background:#e7e7e7;border:1px dotted #ddd;font-family:"Courier New",Courier,monospace;font-size:12px;margin:10px 0 30px;width:580px;overflow:auto;overflow-y:hidden;}
pre code{margin:0 0 0 10px;padding:0 5px;display:block;}
a:link,a:visited{color:#09f;font-weight:bold;}
a:hover,a:active{color:#0cf;}
header a:link,header a:visited{background:#0cf;border:none;color:#fff;display:block;font-size:50px;font-weight:bold;height:100px;line-height:100px;margin-bottom:1px;text-align:center;text-decoration:none;text-shadow:-2px 2px 0 rgba(0,0,0,.2);width:300px;}
header a:hover,header a:active{background:#0df;}
.demo-box{float:left;margin:10px 20px 20px 0;width:130px;}
.demo-box.last{margin:10px 0 20px;}
.demo-box div{background:#f36;color:#fff;font-size:30px;font-weight:bold;height:130px;line-height:130px;margin:10px 0 0 0;text-align:center;text-shadow:-2px 2px 0px rgba(0,0,0,.2);}
.demo-box div:hover{background:#f58;}
#position-box{background:#e7e7e7;border:1px dotted #ddd;height:440px;margin:20px 0;position:relative;width:578px;}
#demo13.demo-box{float:none;left:40px;margin:0;position:absolute;top:20px;}
#demo14.demo-box{float:none;margin:0;position:absolute;right:40px;top:20px;}
#demo15.demo-box{bottom:20px;float:none;left:40px;margin:0;position:absolute;}
#demo16.demo-box{bottom:20px;float:none;margin:0;position:absolute;right:40px;}
.view-source a:link,.view-source a:visited{background:#bbb;border:none;clear:both;color:#fff;display:block;font-size:12px;font-weight:bold;height:30px;line-height:30px;text-align:center;text-decoration:none;text-shadow:-1px 1px 0px rgba(0,0,0,.2);width:130px;}
.view-source a:hover,.view-source a:active{background:#0df;}
table#options{border:1px solid #bbb;font-size:12px;margin:20px 0;text-align:left;width:100%;}
#options thead{background:#bbb;color:#fff;font-weight:bold;text-shadow:-1px 1px 0px rgba(0,0,0,.2);}
#options th{background:#bbb;}
#options th,#options td{border:1px solid #fff;padding:12px 18px;}
#options tr{background:#e1e1e1;}
#options tr:nth-child(even){background:#e7e7e7;}
#options tr:hover{background:#d2e3ff;}

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