jQuery插件jRumble实现网页元素抖动
jRumble，它能让网页上的任意元素抖动起来，在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上，或者div上，你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动，插件可定制性还是蛮高的。PS:此插件在IE中还存在一些小问题
jQueryjRumble是使用方法
<scripttype="text/javascript"src="js/jquery-jrumble.js"></script>
<scripttype="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-sourcepre').hide();
$('.view-sourcea').toggle(function(){
$(this).siblings('pre').stop(false,true).slideDown(500);
$(this).html('HideSource');
},function(){
$(this).siblings('pre').stop(false,true).slideUp(500);
$(this).html('ViewSource');
});
});
</script>
jRumble的参数配置
Option Default Description
rangeX 2 Setthehorizontalrumblerange(pixels)
rangeY 2 Settheverticalrumblerange(pixels)
rangeRot 1 Settherotationrange(degrees)
rumbleSpeed 10 Setthespeed/frequencyinmillisecondsoftherumble(lowernumber=faster)
rumbleEvent ‘hover' Settheeventthattriggerstherumble(‘hover',‘click',‘mousedown',‘constant')
posX ‘left' IfusingjRumbleonafixedorabsolutepositionedelement,choose‘left'or‘right'tomatchyourCSS
posY ‘top' IfusingjRumbleonafixedorabsolutepositionedelement,choose‘top'or‘bottom'tomatchyourCSS
jquery-jrumble.js源码
/*
jRumblev1.1-http://jackrugile.com/jrumble
byJackRugile-http://jackrugile.com
Copyright2011,JackRugile
MITlicense-http://www.opensource.org/licenses/mit-license.php
*/
(function($){
$.fn.jrumble=function(options){
//JRUMBLEOPTIONS
//---------------------------------
vardefaults={
rangeX:2,
rangeY:2,
rangeRot:1,
rumbleSpeed:10,
rumbleEvent:'hover',
posX:'left',
posY:'top'
};
varopt=$.extend(defaults,options);
returnthis.each(function(){
//VARIABLEDECLARATION
//---------------------------------
$obj=$(this);
varrumbleInterval;
varrangeX=opt.rangeX;
varrangeY=opt.rangeY;
varrangeRot=opt.rangeRot;
rangeX=rangeX*2;
rangeY=rangeY*2;
rangeRot=rangeRot*2;
varrumbleSpeed=opt.rumbleSpeed;
varobjPosition=$obj.css('position');
varobjXrel=opt.posX;
varobjYrel=opt.posY;
varobjXmove;
varobjYmove;
varinlineChange;
//SETPOSITIONRELATIONIFCHANGED
//---------------------------------
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);
}
//RUMBLERFUNCTION
//---------------------------------
functionrumbler(elem){
varrandBool=Math.random();
varrandX=Math.floor(Math.random()*(rangeX+1))-rangeX/2;
varrandY=Math.floor(Math.random()*(rangeY+1))-rangeY/2;
varrandRot=Math.floor(Math.random()*(rangeRot+1))-rangeRot/2;
//IFINLINE,MAKEINLINE-BLOCKFORROTATION
//---------------------------------
if(elem.css('display')==='inline'){
inlineChange=true;
elem.css('display','inline-block')
}
//ENSUREMOVEMENT
//---------------------------------
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;
}
}
//RUMBLEBASEDONPOSITION
//---------------------------------
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');
}
}//Endrumblerfunction
//EVENTTYPES(rumbleEvent)
//---------------------------------
varresetRumblerCSS={'position':objPosition,'-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)','-o-transform':'rotate(0deg)','transform':'rotate(0deg)'};
if(opt.rumbleEvent==='hover'){
$obj.hover(
function(){
varrumblee=$(this);
rumbleInterval=setInterval(function(){rumbler(rumblee);},rumbleSpeed);
},
function(){
varrumblee=$(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(){
varrumblee=$(this);
rumbleInterval=setInterval(function(){rumbler(rumblee);},rumbleSpeed);
},function(){
varrumblee=$(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(){
varrumblee=$(this);
rumbleInterval=setInterval(function(){rumbler(rumblee);},rumbleSpeed);
},
mouseup:function(){
varrumblee=$(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(){
varrumblee=$(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'){
varrumblee=$(this);
rumbleInterval=setInterval(function(){rumbler(rumblee);},rumbleSpeed);
}
});
};
})(jQuery);
在线演示http://jackrugile.com/jrumble/#demos
源码下载http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip
以上所述就是本文的全部内容了，希望大家能够喜欢。