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 相关文章推荐
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
js动态为代码着色显示行号
May 29 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python排序算法实例代码
2017/08/10 Python
django模板结构优化的方法
2019/02/28 Python
用 Python 制作地球仪的方法
2020/04/24 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2015国庆节宣传语
2015/07/14 职场文书
食品安全主题班会
2015/08/13 职场文书