欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

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

jQuery jRumble是使用方法


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 

在线演示 http://jackrugile.com/jrumble/#demos

源码下载 http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip

以上所述就是本文的全部内容了,希望大家能够喜欢。