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

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

(0)

相关推荐

  • 基于jquery的仿百度的鼠标移入图片抖动效果

    1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="

  • jQuery模拟窗口抖动效果

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery模拟窗口抖动</title> <style type="text/css"> input{margin-top: 20px;} .center{margin-left: 50%;transform: translate(-50%

  • Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)

    复制代码 代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h

  • jquery.messager.js插件导致页面抖动的解决方法

    消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jquery果冻抖动效果实现方法

    本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">  $(function(){   $("

  • jQuery实现网页抖动的菜单抖动效果

    本文实例讲述了jQuery实现网页抖动的菜单抖动效果.分享给大家供大家参考.具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jQuery+css3实现文字跟随鼠标的上下抖动

    css3过渡属性结合jq,如果直接复制代码运行,需要加载一个jquery文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • jQuery通过扩展实现抖动效果的方法

    本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {     this.each(function() {         var jqNode =

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

    jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><

  • jQuery插件实现控制网页元素动态居中显示

    本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法.分享给大家供大家参考.具体实现方法如下: (function($) { $.fn._center = function(self, parent, dimension) { if(!dimension.vertical && !dimension.horizontal) return; //won't do anything anyway if(parent) parent = self.parent(); else par

  • jQuery插件StickUp实现网页导航置顶

    实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic

  • jQuery插件实现屏蔽单个元素使用户无法点击

    复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http

  • jquery插件hiAlert实现网页对话框美化

    厌烦了IE浏览器的警告窗,伴随着"咚"恐惧的一声,让人感觉好像有一种坏事情即将来临.而如今各浏览器对网页的弹出警告框(alert).确认对话框(confirm).输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格. hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器. 使用方法 hiAlert提供了五种方法可以使用: 1.hiAlert hiAler

  • 强大的jquery插件jqeuryUI做网页对话框效果!简单

    我们先来最简单的,网页的登录窗口: 不过开始之前,大家先下载jquery的插件本人习惯用了vs2008来做网页了,先添加一个空白页 这是最简单的的做法...先在body里面插入 <body><div id="div1"><table><tr><td>用户名</td><td><input type="text" style="width:100px" />

  • 分享jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果. js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "jLzindex" : function(){ //用于判断和设置各个对话框的z-index var $dragIndex = $

  • 2013年优秀jQuery插件整理小结

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等.这些插件的官网都提供了详细的API和相关代码下载,也提供了一些案例展示,可以说稍懂一点前端的同学按照他们提供的API就会使用这些插件. 1.Makisu : jQuery CSS 3D Dropdown Menu concept Makisu是一个jQuery和css3制

  • 50 个 jQuery 插件可将你的网站带到另外一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好的终端用户体验,它们比原来更轻量级,还有更强的处理能力. 关键是这些新发展起来的脚本和插件是能构建响应式Web的,而且还不会丧失它们原有的功能特性--除了更优秀和更轻巧(就文件大小而言)之外,它们还不会增加页面加载的时间. 通过浏览文档,掌握JQuery的语法是很容易的.它可以支持选择DOM元素,创

  • 详解angular2采用自定义指令(Directive)方式加载jquery插件

    由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu

随机推荐