jquery.easing的用法
demo.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ margin:0px; padding:0px; } body{ color:#cccccc; font-size:13px; background: #302b23; font-family:Arial, Helvetica, sans-serif; } ul{ margin:0; padding:0; } ul.container{ width:240px; margin:0 auto; padding:50px; } li{ list-style:none; text-align:left; } li.menu{ padding:5px 0; width:100%; } li.button a{ display:block; font-family:BPreplay,Arial,Helvetica,sans-serif; font-size:21px; height:34px; overflow:hidden; padding:10px 20px 0; position:relative; width:200px; } li.button a:hover{ text-decoration:none; } li.button a span{ height:44px; position:absolute; right:0; top:0; width:4px; display:block; } li.button a.blue{background:url(../images/blue.png) repeat-x top left; color:#074384;} li.button a.blue span{ background:url(../images/blue.png) repeat-x top right;} li.button a.green{background:url(../images/green.png) repeat-x top left; color:#436800;} li.button a.green span{ background:url(../images/green.png) repeat-x top right;} li.button a.orange{background:url(../images/orange.png) repeat-x top left; color:#882e02;} li.button a.orange span{ background:url(../images/orange.png) repeat-x top right;} li.button a.red{background:url(../images/red.png) repeat-x top left; color:#641603;} li.button a.red span{ background:url(../images/red.png) repeat-x top right;} li.button a:hover{ background-position:bottom left;} li.button a:hover span{ background-position:bottom right;} .dropdown{ display:none; padding-top:5px; width:100%; } .dropdown li{ background-color:#373128; border:1px solid #40392C; color:#CCCCCC; margin:5px 0; padding:4px 18px; } h1{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:36px; font-weight:normal; margin-bottom:15px; } h2{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:12px; font-weight:normal; padding-right:140px; right:0; text-align:right; text-transform:uppercase; top:15px; } .clear{ clear:both; } #main{ margin:15px auto; text-align:center; width:920px; position:relative; } a, a:visited { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } p{ padding:10px; text-align:center; }
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>竖导航菜单</title> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body style="text-align:center"> <div id="main"> <ul class="container"> <li class="menu"> <ul> <li class="button"><a href="#" class="green">绿色 <span></span></a></li> <li class="dropdown"> <ul> <li><a href="#" onclick="$('.button a').eq(2).click();return false;">打开第三节</a></li> <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">关闭这一节</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="orange">橙色<span></span></a></li> <li class="dropdown"> <ul> <li><a href="#" onclick="$('.button a:last').click();return false;">打开最后一节</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="blue">蓝色<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> <li>空白</li> <li>空白</li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="button"><a href="#" class="red">红色<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> <li><a href="http://www.onestopweb.cn/">一站式共享网络</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html>
jquery.easing.1.3.js
jQuery.easing['jswing'] = jQuery.easing['swing']; jQuery.extend( jQuery.easing, { def: 'easeOutQuad', swing: function (x, t, b, c, d) { return jQuery.easing[jQuery.easing.def](x, t, b, c, d); }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInCubic: function (x, t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutCubic: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }, easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }, easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }, easeOutQuart: function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOutQuart: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }, easeInQuint: function (x, t, b, c, d) { return c*(t/=d)*t*t*t*t + b; }, easeOutQuint: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; }, easeInSine: function (x, t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOutSine: function (x, t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }, easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeInCirc: function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOutCirc: function (x, t, b, c, d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOutCirc: function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, easeInElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, easeInOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, easeInBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, easeInBounce: function (x, t, b, c, d) { return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOutBounce: function (x, t, b, c, d) { if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; } });
demo.js
$(document).ready(function(){ $.easing.def = "easeOutBounce"; $('li.button a').click(function(e){ var dropDown = $(this).parent().next(); $('.dropdown').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); e.preventDefault(); }) });
效果图:
相关推荐
"jq+css实现竖向导航栏"是指利用JavaScript库jQuery和层叠样式表(CSS)来创建一种垂直布局的导航菜单,这种菜单通常被称为“竖向导航栏”或“侧边栏”。下面将详细介绍如何使用jQuery和CSS来实现这一功能。 首先,让...
同时,导航栏还会根据用户的滚动位置或者特定交互触发CSS的联动变化特效,提供更加丰富的用户体验,类似于淘宝(TB)、京东(JD)等知名电商平台所采用的竖条导航栏设计。 首先,`index.html`是网页的主体文件,它...
在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。本教程将深入探讨如何使用jQuery创建一个既可横向又能纵向滑动的完美菜单,这种效果可以极大提升用户体验,使得网站更加互动和...
"jQuery弹性竖向导航菜单特效插件"是一个专为提升用户体验而设计的专业工具,旨在为网站提供美观且功能强大的导航解决方案。这个插件利用了jQuery库的强大功能,实现了动态效果,使得菜单在响应用户交互时具有良好的...
手风琴导航是一种收放式的导航栏设计,通常用于显示多级菜单。其特点是只显示一级菜单项,当用户点击某个一级菜单时,相应的二级菜单会展开,其他二级菜单则会自动收缩。这种设计尤其适用于左侧导航,因为可以节省...
本文将深入探讨如何使用jQuery实现一个既支持横向又支持竖向的,可扩展到三级甚至四级的下拉导航菜单。这种菜单不仅提高了用户体验,也使网站结构更加清晰。 首先,我们需要理解jQuery的基础。jQuery是一个轻量级的...
通过这个选择器,我们可以轻松地获取到页面上的特定元素,如导航菜单。 接下来,我们进入主题——竖向动画菜单的实现。这种菜单通常用于网站的侧边栏,以展示层次结构的内容。以下是一些关键步骤: 1. **HTML结构*...
本项目聚焦于一个特定的实现方式:使用jQuery创建一个二级竖向导航菜单,该菜单具有slide滑动和渐隐显示的效果。下面将详细阐述这个技术知识点。 **jQuery基础** jQuery是一个流行的JavaScript库,它简化了...
在本文中,我们将探讨如何使用jQuery来实现一个红色竖向多级向右展开的导航菜单。这个菜单设计常用于博客网站,它具有红色背景,视觉效果出色,子菜单项会在鼠标悬停时向右展开。以下是你需要了解的关键知识点: 1....
在本文中,我们将深入探讨如何使用jQuery和CSS3创建一款炫酷的垂直固定侧边栏导航菜单特效。这种特效能够提升用户体验,使网站更具吸引力。首先,我们来了解这两个技术的基础知识。 **jQuery** 是一个JavaScript库...
一款竖向排列的多层级手风琴菜单,这种菜单可展开、折叠所属的子菜单,一级展开下一级,平时不需要时可由用户决定是否收起不显示,可将不常用的菜单项默认隐藏不显示。在展开后,可显示子菜单、也可显示相关内容,一...
【jQuery实现的网页竖向菜单效果】是一种常见的网页交互设计,用于提高用户界面的易用性和美观性。这种菜单通常出现在网页的侧边栏,尤其是后台管理系统中,以垂直列表的形式展示多级导航选项。本实例中,我们将讨论...
在网页设计中,交互性和用户体验是至关重要的因素之一,而菜单作为用户导航网站的主要途径,其设计必须直观且易于操作。jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,...
【jQuery 横向、竖向展开菜单】是一种常见的网页交互设计,用于提供导航或展示层级结构信息。这种菜单在用户界面中非常常见,因为它们能够有效地节省空间,同时为用户提供清晰的路径来探索网站内容。jQuery库因其...
- `.topnav` 类设置了导航菜单的基本布局和字体属性。 - `***nav` 选择器定义了无序列表的样式,包括内边距、外边距和字体大小等。 - `***nav li` 选择器定义了菜单项的基本样式。 - `***nav li a` 选择器定义了链接...
总的来说,这个菜单系统利用了jQuery的事件处理能力和CSS的样式控制,为用户提供了一种直观且交互性强的导航体验。通过调整CSS样式和jQuery脚本,我们可以轻松地定制菜单的颜色、布局和动画效果,以适应不同网站的...
这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉...