jQuery实现网页抖动的菜单抖动效果
作者：皮蛋 发布时间：2024-04-19 10:19:04
标签：jQuery,抖动
本文实例讲述了jQuery实现网页抖动的菜单抖动效果。分享给大家供大家参考。具体如下：
这里的jQuery抖动导航菜单效果，兼容IE7/8/9及其它主流浏览器，使用方法：先引入jQuery脚本库和jquery.shake.js文件，然后在需要的元素上调用shake( )方法，例如想使整个页面抖动，则这么写：$('body').shake( )，调用上述方法后，将鼠标移至指定的元素，该元素就会抖动。
运行效果截图如下：
具体代码如下：
<!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程序设计有所帮助。
0
投稿猜你喜欢
简介这两天更新完Xcode8之后发现Xcode对图标的要求又有了变化，之前用的一个小应用“IconKit”还没赶上节奏，已经不能满足Xcod- 准备工作：MyEclipse使用的是2013版，mysql Ver 14.14 Distrib 5.6.281.jar包的下载（jdbc驱动
- 首先，我的索引结构是酱紫的。
- docx2txt的Github地址docx2txt是基于python的从docx文件中提取文本和图片的库。代码是从python-docx中获
- 前言这段时间一直在研究飞浆平台，最近试了试PaddleSpeech项目，试着对文本语音做处理。整体的效果个人觉着不算特别优越，只能作为简单的
- 一、PL/SQL出现的目的 结构化查询语言(Structured Query Language，简称SQL)是用来访问关系型数据库一种通用语
- 关于target="_blank"去留的问题在网上已经被反复争议很多次了。有的说要留，有的说要去掉。主张留的一方主要是考
- 工作中遇到一个问题，两个字符串匹配，要求：每个字符串中最多含有一个*，?可以无限多个*代表一个任意长度的字符串，而?则代表一个字符要求可以提
- 这篇文章主要介绍了django 简单实现登录验证给你,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友
- 1、简介QListWidget 是一个升级版本的QListView , 它已经建立一个基于数据存储模型（QListWidgetItem）,直
- 在pycharm中我们有时需要切换python的版本，这里需要注意的是我们是在PyCharm中的Preferences中切换的，在File的
- 为了熟悉Python基础语法，学习了一个经典的案例：飞机大战，最后实现效果如下：实现步骤：①下载64位对应python版本的pygame：p
- 前言本文中所有的代码使用 JavaScript 编写，但你也可以用其他兼容 JSR 223 的脚本语言。这些例子可作为脚本文件也可以在交互式
- 本文实例讲述了JavaScript让Textarea支持tab按键的方法。分享给大家供大家参考。具体实现方法如下：HTMLTextAreaE
- 爬虫是大家公认的入门Python最好方式，没有之一。虽然Python有很多应用的方向，但爬虫对于新手小白而言更友好，原理也更简单，几行代码就
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换
- 1、SQL SERVER 2005的性能工具中有SQL Server Profiler和数据库引擎优化顾问，极好的东东，必须熟练使用。 2、
- 时间序列是指在一段时间内发生的任何可量化的度量或事件。尽管这听起来微不足道，但几乎任何东西都可以被认为是时间序列。一个月里你每小时的平均心率
- 描述：使用QtDesignner设计界面，pyQt5+python3实现主体方法制作的猜数字游戏。游戏规则：先选择游戏等级：初级、中级、高级
- suspect_pages 表位于 msdb 数据库中，是在 SQL Server 2005 中引入的。用于维护有关可疑页的信息的 susp
