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


Posted in Javascript onJune 05, 2015

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

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

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
AngularJs表单验证实例详解
May 30 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 #Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 #Javascript
JavaScript中toString()方法的使用详解
Jun 05 #Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 #Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 #Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 #Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 #Javascript
You might like
高亮度显示php源代码
2006/10/09 PHP
在字符串中把网址改成超级链接
2006/10/09 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
详解Python多线程
2016/11/14 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Django实现跨域请求过程详解
2019/07/25 Python
python flask搭建web应用教程
2019/11/19 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python 获取计算机的网卡信息
2021/02/18 Python
Python创建自己的加密货币的示例
2021/03/01 Python
英国著名书店:Foyles
2018/12/01 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
高校十八大报告感想
2014/01/27 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
气象学专业个人求职信
2014/04/22 职场文书
倡议书作文
2015/01/19 职场文书
中秋节主题班会
2015/08/14 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记