`

JQ 竖导航菜单

 
阅读更多

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

 

效果图:

 

 

 

 

 

  • 大小: 20.3 KB
  • 大小: 9.7 KB
分享到:
评论

相关推荐

    jq+css实现竖向导航栏

    "jq+css实现竖向导航栏"是指利用JavaScript库jQuery和层叠样式表(CSS)来创建一种垂直布局的导航菜单,这种菜单通常被称为“竖向导航栏”或“侧边栏”。下面将详细介绍如何使用jQuery和CSS来实现这一功能。 首先,让...

    基于JQ悬浮导航CSS联动变化特效

    同时,导航栏还会根据用户的滚动位置或者特定交互触发CSS的联动变化特效,提供更加丰富的用户体验,类似于淘宝(TB)、京东(JD)等知名电商平台所采用的竖条导航栏设计。 首先,`index.html`是网页的主体文件,它...

    JQuery横向纵向导航菜单

    在网页设计中,导航菜单是不可或缺的部分,它帮助用户快速浏览和访问网站的不同部分。本教程将深入探讨如何使用jQuery创建一个既可横向又能纵向滑动的完美菜单,这种效果可以极大提升用户体验,使得网站更加互动和...

    jquery弹性竖向导航菜单特效插件

    "jQuery弹性竖向导航菜单特效插件"是一个专为提升用户体验而设计的专业工具,旨在为网站提供美观且功能强大的导航解决方案。这个插件利用了jQuery库的强大功能,实现了动态效果,使得菜单在响应用户交互时具有良好的...

    jquery-手写-多级可拓展竖手风琴导航

    手风琴导航是一种收放式的导航栏设计,通常用于显示多级菜单。其特点是只显示一级菜单项,当用户点击某个一级菜单时,相应的二级菜单会展开,其他二级菜单则会自动收缩。这种设计尤其适用于左侧导航,因为可以节省...

    jquery横向和竖向支持三级、四级下拉导航菜单

    本文将深入探讨如何使用jQuery实现一个既支持横向又支持竖向的,可扩展到三级甚至四级的下拉导航菜单。这种菜单不仅提高了用户体验,也使网站结构更加清晰。 首先,我们需要理解jQuery的基础。jQuery是一个轻量级的...

    jquery竖向动画菜单

    通过这个选择器,我们可以轻松地获取到页面上的特定元素,如导航菜单。 接下来,我们进入主题——竖向动画菜单的实现。这种菜单通常用于网站的侧边栏,以展示层次结构的内容。以下是一些关键步骤: 1. **HTML结构*...

    jquery导航菜单二级菜单slide滑动渐隐显示

    本项目聚焦于一个特定的实现方式:使用jQuery创建一个二级竖向导航菜单,该菜单具有slide滑动和渐隐显示的效果。下面将详细阐述这个技术知识点。 **jQuery基础** jQuery是一个流行的JavaScript库,它简化了...

    jquery实现红色竖向多级向右展开的导航菜单效果

    在本文中,我们将探讨如何使用jQuery来实现一个红色竖向多级向右展开的导航菜单。这个菜单设计常用于博客网站,它具有红色背景,视觉效果出色,子菜单项会在鼠标悬停时向右展开。以下是你需要了解的关键知识点: 1....

    jQuery和CSS3炫酷垂直固定侧边栏导航菜单特效

    在本文中,我们将深入探讨如何使用jQuery和CSS3创建一款炫酷的垂直固定侧边栏导航菜单特效。这种特效能够提升用户体验,使网站更具吸引力。首先,我们来了解这两个技术的基础知识。 **jQuery** 是一个JavaScript库...

    多层级垂直风格折叠展开式jQuery导航菜单.rar

    一款竖向排列的多层级手风琴菜单,这种菜单可展开、折叠所属的子菜单,一级展开下一级,平时不需要时可由用户决定是否收起不显示,可将不常用的菜单项默认隐藏不显示。在展开后,可显示子菜单、也可显示相关内容,一...

    jQuery实现的网页竖向菜单效果代码

    【jQuery实现的网页竖向菜单效果】是一种常见的网页交互设计,用于提高用户界面的易用性和美观性。这种菜单通常出现在网页的侧边栏,尤其是后台管理系统中,以垂直列表的形式展示多级导航选项。本实例中,我们将讨论...

    jquery横向纵向菜单

    在网页设计中,交互性和用户体验是至关重要的因素之一,而菜单作为用户导航网站的主要途径,其设计必须直观且易于操作。jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,...

    jQuery 横向、竖向展开菜单

    【jQuery 横向、竖向展开菜单】是一种常见的网页交互设计,用于提供导航或展示层级结构信息。这种菜单在用户界面中非常常见,因为它们能够有效地节省空间,同时为用户提供清晰的路径来探索网站内容。jQuery库因其...

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    - `.topnav` 类设置了导航菜单的基本布局和字体属性。 - `***nav` 选择器定义了无序列表的样式,包括内边距、外边距和字体大小等。 - `***nav li` 选择器定义了菜单项的基本样式。 - `***nav li a` 选择器定义了链接...

    Jquery实现纵向横向菜单

    总的来说,这个菜单系统利用了jQuery的事件处理能力和CSS的样式控制,为用户提供了一种直观且交互性强的导航体验。通过调整CSS样式和jQuery脚本,我们可以轻松地定制菜单的颜色、布局和动画效果,以适应不同网站的...

    jquery实现可横向和竖向展开的动态下滑菜单效果

    这里演示了两个下拉导航菜单的效果,用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现,最新的jquery版本也可以引入,在演示页面中,分别有横向水平向下滑出的下拉...

Global site tag (gtag.js) - Google Analytics