当前位置: 首页 > 编程笔记 >

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

卫招
2023-03-14
本文向大家介绍jQuery插件jRumble实现网页元素抖动,包括了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

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

 类似资料:
  • 本文向大家介绍jQuery插件实现控制网页元素动态居中显示,包括了jQuery插件实现控制网页元素动态居中显示的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍jQuery实现网页抖动的菜单抖动效果,包括了jQuery实现网页抖动的菜单抖动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现网页抖动的菜单抖动效果。分享给大家供大家参考。具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用sha

  • 本文向大家介绍jQuery实现元素的插入,包括了jQuery实现元素的插入的使用技巧和注意事项,需要的朋友参考一下  效果图: 图(1) 初始效果 图(2) 点击' 插入到此元素前面 '效果  代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍jQuery插件StickUp实现网页导航置顶,包括了jQuery插件StickUp实现网页导航置顶的使用技巧和注意事项,需要的朋友参考一下 实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。 使用方法: 1.加载插件和jQuery 2.HT

  • 本文向大家介绍基于jQuery实现网页进度显示插件,包括了基于jQuery实现网页进度显示插件的使用技巧和注意事项,需要的朋友参考一下 相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作, 以下是插件的测试截图 ,提供了两个皮肤 使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示 1、简单的调用 //所有步骤的数据 var stepListJson=[

  • 本文向大家介绍jquery分页插件jquery.pagination.js实现无刷新分页,包括了jquery分页插件jquery.pagination.js实现无刷新分页的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发