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

jRumble，它能让网页上的任意元素抖动起来，在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上，或者div上，你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动，插件可定制性还是蛮高的。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的参数配置
Option Default Description rangeX 2 Set the horizontal rumble range (pixels) rangeY 2 Set the vertical rumble range (pixels) rangeRot 1 Set the rotation range (degrees) rumbleSpeed 10 Set 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);



在线演示 http://jackrugile.com/jrumble/#demos
源码下载 http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip
以上所述就是本文的全部内容了，希望大家能够喜欢。


有用  |  无用 取消

猜你喜欢