20款jquery网页颤抖摇摆特效

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

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

以下是 20款jquery网页颤抖摇摆特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>20款jquery网页颤抖摇摆特效</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.jrumble.1.3.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
	/*========================================================*/
	/* Ranges
	/*========================================================*/
	$('#demo1').jrumble({
		x: 2,
		y: 2,
		rotation: 1
	});
	
	$('#demo2').jrumble({
		x: 10,
		y: 10,
		rotation: 4
	});
	
	$('#demo3').jrumble({
		x: 4,
		y: 0,
		rotation: 0
	});
	
	$('#demo4').jrumble({
		x: 0,
		y: 0,
		rotation: 5
	});
	
	$('#demo1, #demo2, #demo3, #demo4').hover(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
	
	/*========================================================*/
	/* Speeds
	/*========================================================*/
	$('#demo5').jrumble({
		speed: 0
	});
	
	$('#demo6').jrumble({
		speed: 50
	});
	
	$('#demo7').jrumble({
		speed: 100,
	});
	
	$('#demo8').jrumble({
		speed: 200,
	});
	
	$('#demo5, #demo6, #demo7, #demo8').hover(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
	
	/*========================================================*/
	/* Opacity
	/*========================================================*/
	$('#demo9').jrumble({
		opacity: true
	});
	
	$('#demo10').jrumble({
		opacity: true,
		opacityMin: .75
	});
	
	$('#demo11').jrumble({
		opacity: true,
		opacityMin: .1
	});
	
	$('#demo12').jrumble({
		x: 6,
		y: 6,
		rotation: 6,
		speed: 5,
		opacity: true,
		opacityMin: .05
	});
	
	$('#demo9, #demo10, #demo11, #demo12').hover(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
	
	/*========================================================*/
	/* Trigger Examples
	/*========================================================*/
	$('#demo13, #demo14, #demo15, #demo16, #demo17, #demo18, #demo19, #demo20').jrumble();
	
	$('#demo13').hover(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
	
	$('#demo14').toggle(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
	
	$('#demo15').bind({
		'mousedown': function(){
			$(this).trigger('startRumble');
		},
		'mouseup': function(){
			$(this).trigger('stopRumble');
		}
	});
	
	$('#demo16').trigger('startRumble');
	
	$('#demo17').hover(function(){
		$('#demo18').trigger('startRumble');
	}, function(){
		$('#demo18').trigger('stopRumble');
	});
	
	$('#demo18').hover(function(){
		$('#demo17').trigger('startRumble');
	}, function(){
		$('#demo17').trigger('stopRumble');
	});
	
	var demoTimeout;
	$('#demo19').click(function(){
		$this = $(this);
		clearTimeout(demoTimeout);
		$this.trigger('startRumble');
		demoTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 1500)
	});
	
	var demoStart = function(){
		$('#demo20').trigger('startRumble');
		setTimeout(demoStop, 300);
	};
	
	var demoStop = function(){
		$('#demo20').trigger('stopRumble');
		setTimeout(demoStart, 300);
	};
	
	demoStart();		
	
});
</script>
</head>
<body id="introduction">
<div id="page">
	<div id="container" class="content clearfix">
<!------------------------------------- THE CONTENT -------------------------------------------------> 
		
		<h3>Ranges</h3>
		
		<div class="demo-box">
			<h4>x: 2<br/>y: 2<br/>rotation: 1</h4>
			<div id="demo1">1</div>
		</div>
		
		<div class="demo-box">
			<h4>x: 10<br/>y: 10<br/>rotation: 4</h4>
			<div id="demo2">2</div>
		</div>
		
		<div class="demo-box">
			<h4>x: 4<br/>y: 0<br/>rotation: 0</h4>
			<div id="demo3">3</div>
		</div>
		
		<div class="demo-box last">
			<h4>x: 0<br/>y: 0<br/>rotation: 5</h4>
			<div id="demo4">4</div>
		</div>
		
		<h3>Speeds</h3>
		
		<div class="demo-box">
			<h4>speed: 0</h4>
			<div id="demo5">5</div>
		</div>
		
		<div class="demo-box">
			<h4>speed: 50</h4>
			<div id="demo6">6</div>
		</div>
		
		<div class="demo-box">
			<h4>speed: 100</h4>
			<div id="demo7">7</div>
		</div>
		
		<div class="demo-box last">
			<h4>speed: 200</h4>
			<div id="demo8">8</div>
		</div>
		
		
		<h3>Opacity</h3>
		
		<div class="demo-box">
			<h4>opacity: true</h4>
			<div id="demo9">9</div>
		</div>
		
		<div class="demo-box">
			<h4>opacityMin: .75</h4>
			<div id="demo10">10</div>
		</div>
		
		<div class="demo-box">
			<h4>opacityMin: .1</h4>
			<div id="demo11">11</div>
		</div>
		
		<div class="demo-box last">
			<h4>Caffeinated</h4>
			<div id="demo12">12</div>
		</div>
		
		
		<h3>Trigger Examples</h3>
		
		<div class="demo-box">
			<h4>Hover</h4>
			<div id="demo13">13</div>
		</div>
		
		<div class="demo-box">
			<h4>Click</h4>
			<div id="demo14">14</div>
		</div>
		
		<div class="demo-box">
			<h4>Mousedown</h4>
			<div id="demo15">15</div>
		</div>
		
		<div class="demo-box last">
			<h4>Constant</h4>
			<div id="demo16">16</div>
		</div>
		
		<div class="demo-box">
			<h4>Remote</h4>
			<div id="demo17">17</div>
		</div>
		
		<div class="demo-box">
			<h4>Remote</h4>
			<div id="demo18">18</div>
		</div>
		
		<div class="demo-box">
			<h4>Timed (Click)</h4>
			<div id="demo19">19</div>
		</div>
		
		<div class="demo-box last">
			<h4>Pulse</h4>
			<div id="demo20">20</div>
		</div>
  </div>   
 </div> 
</body>
</html>

JS代码(jquery.jrumble.1.3.min.js):

/* jRumble v1.3 - http://jackrugile.com/jrumble - MIT License */
(function(f){
	f.fn.jrumble=function(g){
	var a=f.extend({
	x:2,y:2,rotation:1,speed:15,opacity:false,opacityMin:0.5}
,g);
	return this.each(function(){
	var b=f(this),h=a.x*2,i=a.y*2,k=a.rotation*2,g=a.speed===0?1:a.speed,m=a.opacity,n=a.opacityMin,l,j,o=function(){
	var e=Math.floor(Math.random()*(h+1))-h/2,a=Math.floor(Math.random()*(i+1))-i/2,c=Math.floor(Math.random()*(k+1))-k/2,d=m?Math.random()+n:1,e=e===0&&h!==0?Math.random()<0.5?1:-1:e,a=a===0&&i!==0?Math.random()<0.5?1:-1:a;
	b.css("display")==="inline"&&(l=true,b.css("display","inline-block"));
	b.css({
	position:"relative",left:e+"px",top:a+"px","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity="+d*100+")",filter:"alpha(opacity="+d*100+")","-moz-opacity":d,"-khtml-opacity":d,opacity:d,"-webkit-transform":"rotate("+c+"deg)","-moz-transform":"rotate("+c+"deg)","-ms-transform":"rotate("+c+"deg)","-o-transform":"rotate("+c+"deg)",transform:"rotate("+c+"deg)"}
)}
,p={
	left:0,top:0,"-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",filter:"alpha(opacity=100)","-moz-opacity":1,"-khtml-opacity":1,opacity:1,"-webkit-transform":"rotate(0deg)","-moz-transform":"rotate(0deg)","-ms-transform":"rotate(0deg)","-o-transform":"rotate(0deg)",transform:"rotate(0deg)"}
;
	b.bind({
	startRumble:function(a){
	a.stopPropagation();
	clearInterval(j);
	j=setInterval(o,g)}
,stopRumble:function(a){
	a.stopPropagation();
	clearInterval(j);
	l&&b.css("display","inline");
	b.css(p)}
}
)}
)}
}
)(jQuery);

CSS代码(styles.css):

*{margin:0;padding:0;}
#container{}
#footer{position:relative;height:70px;clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
body{background:#2a2b2d;font:13px/1.3 'Microsoft Yahei','宋体';color:#999;}
#page,#footer_inner{margin:0 auto;width:580px;}
h1#logo{overflow:hidden;height:93px;padding:25px 0;}
h1#logo a{display:block;height:93px;}
#container{margin:0 auto;padding:40px 0 0;}
#container h2{font-weight:normal;line-height:28px;}
#container p{padding:10px 0;}
.credit{text-align:center;padding:20px 0 100px;font-size:10px;}
a,a:visited{text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;width:100%;}
#footer h2{font-size:18px;font-weight:normal;height:70px;line-height:70px;font-family:"Microsoft Yahei";color:#eee;}
#footer_inner{position:relative;}
#footer a.tzine,a.tzine:visited{color:#FCFCFC;font-size:12px;line-height:70px;position:absolute;top:0;right:0;width:90px;}
/*-核心代码-*/
/* demo style */
.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;}

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