jQuery插件jRumble實現網頁元素抖動

2024-05-06 16:21:28

字體：大中小

來源：轉載

供稿：網友

jRumble是jquery的插件，可以讓你選擇的元素抖動。調用時只需一句代碼即可，有些抖動效果還挺可愛，可自定義的抖動效果，十分的炫酷，有需要的小伙伴可以參考下。

jRumble，它能讓網頁上的任意元素抖動起來，在你的網站中使用這個效果會有很大的機率吸引用戶的注意力。此插件的效果可以用在鏈接上，或者div上，你可以設置抖動的范圍、XY坐標、抖動幅度等?？稍O置為當鼠標移動上去抖動或者默認一直抖動，插件可定制性還是蠻高的。PS:此插件在IE中還存在一些小問題

jQuery jRumble是使用方法

<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>

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源碼

/*

jRumble v1.1 - http://jackrugile.com/jrumble

by Jack Rugile - http://jackrugile.com

Copyright 2011, Jack Rugile

MIT license - http://www.opensource.org/licenses/mit-license.php

*/

(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);