jQuery抖动导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery抖动导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
    <title>jQuery抖动导航菜单</title>
    <style type="text/css">
        body {
            background-color: #F8F8FF;
        }

        #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>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.shake.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div id="demo">
        <ul>
            <li>首页</li>
            <li>第2栏</li>
            <li>第6栏</li>
            <li>第4栏</li>
            <li>第3栏</li>
            <li>第5栏</li>
            <li>第7栏</li>
            <li>第8栏</li>
            <li>第9栏</li>
        </ul>
        <div id="msg">将鼠标移动到导航条上查看效果</div>
    </div>
    <script type="text/javascript">
        $('#demo li').shake();
    </script>
</body>
</html>

JS代码(jquery.shake.js):

(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));

附件:下载该文件资源,减少时间成本(增值服务)