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


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery实现网页抖动的菜单抖动效果。分享给大家供大家参考。具体如下:

这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body { background-color: lightgreen; }
#demo, #demo *, #footer, #footer * { margin: 0; padding: 0; }
#demo, #footer { width: 70%; margin: 1em auto; font: normal 1em/1.4em 微软雅黑; }
#demo ul { list-style: none; overflow: hidden; background-color: rgb(241, 241, 241); padding: 1em 0; }
#demo ul li { float: left; width: 10%; text-align: center; cursor: pointer; padding: .3em 0; color: #262626; }
#demo ul li:hover { background-color: #D4D4D4; }
#msg { font-size: 1.2em; text-align: center; margin: 2em 0; }
#footer { font-size: .8em; }
#footer p { margin: .3em 0; }
#footer a { color: rgb(126, 34, 34); text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer a:visited { color: rgb(187, 166, 166); }
</style>
<title>jQuery抖动导航菜单效果</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.fn.shake = function (s) {
 var t = { rangeX: 2, rangeY: 2, rangeRot: 1, rumbleSpeed: 10, rumbleEvent: 'hover', posX: 'left', posY: 'top' }, u = $.extend(t, s);
 return this.each(function () {
  var $obj = $(this)
  , f
  , g = u.rangeX * 2
  , h = u.rangeY * 2
  , i = u.rangeRot * 2
  , j = u.rumbleSpeed
  , k = $obj.css('position')
  , l = u.posX
  , m = u.posY
  , n
  , o
  , p
  , q = { 'position': k, '-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)' };
  if (l === 'left') {
  n = parseInt($obj.css('left'), 10)
  }
  if (l === 'right') {
  n = parseInt($obj.css('right'), 10)
  }
  if (m === 'top') {
  o = parseInt($obj.css('top'), 10)
  }
  if (m === 'bottom') {
  o = parseInt($obj.css('bottom'), 10)
  }
  function rumbler(a) {
  var b = Math.random()
  , c = Math.floor(Math.random() * (g + 1)) - g / 2
  , d = Math.floor(Math.random() * (h + 1)) - h / 2
  , e = Math.floor(Math.random() * (i + 1)) - i / 2;
  if (a.css('display') === 'inline') {
   p = true;
   a.css('display', 'inline-block')
  }
  if (c === 0 && g !== 0) {
   c = b < .5 ? 1 : -1;
  }
  if (d === 0 && h !== 0) {
   d = b < .5 ? 1 : -1;
  }
  if (k === 'absolute') {
   a.css({ 'position': 'absolute', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, n + c + 'px');
   a.css(m, o + d + 'px')
  }
  if (k === 'fixed') {
   a.css({ 'position': 'fixed', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, n + c + 'px');
   a.css(m, o + d + 'px')
  }
  if (k === 'static' || k === 'relative') {
   a.css({ 'position': 'relative', '-webkit-transform': 'rotate(' + e + 'deg)', '-moz-transform': 'rotate(' + e + 'deg)', '-o-transform': 'rotate(' + e + 'deg)', 'transform': 'rotate(' + e + 'deg)' });
   a.css(l, c + 'px');
   a.css(m, d + 'px')
  }
  }
  if (u.rumbleEvent === 'hover') {
  $obj.hover(function () {
   var a = $(this);
   f = setInterval(function () {
   rumbler(a)
   }, j)
  }, function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
   a.css('display', 'inline')
   }
  });
  }
  if (u.rumbleEvent === 'click') {
  $obj.toggle(function () {
   var a = $(this);
   f = setInterval(function () {
   rumbler(a)
   }, j)
  }, function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
   a.css('display', 'inline')
   }
  });
  }
  if (u.rumbleEvent === 'mousedown') {
  $obj.bind({
   mousedown: function () {
   var a = $(this);
   f = setInterval(function () {
    rumbler(a)
   }, j)
   }, mouseup: function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
    a.css('display', 'inline')
   }
   }, mouseout: function () {
   var a = $(this);
   clearInterval(f);
   a.css(q);
   a.css(l, n + 'px');
   a.css(m, o + 'px');
   if (p === true) {
    a.css('display', 'inline')
   }
   }
  });
  }
  if (u.rumbleEvent === 'constant') {
  var r = $(this);
  f = setInterval(function () {
   rumbler(r)
  }, j);
  }
 });
 }
}(jQuery));
</script>
</head>
<body>
 <div id="demo">
 <ul>
  <li>首页</li>
  <li>ASP</li>
  <li>PHP</li>
  <li>JSP</li>
  <li>DELPHI</li>
  <li>VC++</li>
  <li>C#</li>
  <li>VB</li>
  <li>.NET</li>
 </ul>
 <div id="msg">将鼠标移动到导航条上查看效果</div>
 </div>
 <script type="text/javascript">
 $('#demo li').shake();
 </script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 #Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 #Javascript
css如何让浮动元素水平居中
Aug 07 #Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 #Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 #Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php目录操作实例代码
2014/02/21 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python里dict变成list实例方法
2019/06/26 Python
python怎么自定义捕获错误
2020/06/29 Python
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
教师岗位聘任书范文
2014/03/29 职场文书
给校长的建议书400字
2014/05/15 职场文书
世界地球日活动总结
2015/02/09 职场文书
获奖感言怎么写
2015/07/31 职场文书