jQuery插件jRumble实现网页元素抖动

jQuery 2018-12-31

jRumble，它能让网页上的任意元素抖动起来，在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上，或者div上，你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动，插件可定制性还是蛮高的。PS:此插件在IE中还存在一些小问题

jQuery jRumble是使用方法

jRumble的参数配置

OptionDefaultDescription rangeX2Set the horizontal rumble range (pixels) rangeY2Set the vertical rumble range (pixels) rangeRot1Set the rotation range (degrees) rumbleSpeed10Set the speed/frequency in milliseconds of the rumble (lower number = faster) rumbleEvent‘hover'Set the event that triggers the rumble (‘hover',‘click',‘mousedown',‘constant') posX‘left'If using jRumble on a fixed or absolute positioned element,choose ‘left' or ‘right' to match your CSS posY‘top'If using jRumble on a fixed or absolute positioned element,choose ‘top' or ‘bottom' to match your CSS

jquery-jrumble.js源码

PHP */

(function($){
$.fn.jrumble = function(options){

// JRUMBLE OPTIONS
//---------------------------------
var defaults = {
rangeX: 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 = rangeX2;
rangeY = rangeY2;
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',objYmove+randY+'px');
}
if(objPosition === 'static' || objPosition === 'relative'){
elem.css({'position':'relative',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,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); },mouseup: function(){
var rumblee = $(this);
clearInterval(rumbleInterval);
rumblee.css(resetRumblerCSS);
rumblee.css(objXrel,'inline');
}
},mouSEOut: function(){
var rumblee = $(this);
clearInterval(rumbleInterval);
rumblee.css(resetRumblerCSS);
rumblee.css(objXrel,'inline');
}
}
});
}