jQuery插件jRumble实现网页元素抖动
作者:bea
jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的。PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"></s
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
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
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
以上所述就是本文的全部内容了,希望大家能够喜欢。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript中的lastIndexOf()方法使用详解1
- JavaScript中使用concat()方法拼接字符串的教程
- jquery实现点击label的同时触发文本框点击事件的方法
- jquery判断至少有一个checkbox被选中的方法
- js实现点击链接后延迟3秒再跳转的方法
- jQuery实现延迟跳转的方法
- jQuery判断一个元素是否可见的方法
- jquery超简单实现手风琴效果的方法
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- JavaSacript中charCodeAt()方法的使用详解
- 简介JavaScript中charAt()方法的使用
- JavaScript中length属性的使用方法
- jQuery插件bgStretcher.js实现全屏背景特效
- js+html5绘制图片到canvas的方法
- 简介JavaScript中valueOf()方法的使用1