滑动的导航条

于 2017-11-15 18:02:04 发布
阅读量367 收藏
点赞数
分类专栏： 练手小案例
本文介绍了一个使用jQuery实现的滑动导航条效果示例。该示例通过jQuery操作DOM元素，结合CSS样式实现了平滑过渡的动画效果，并介绍了如何为菜单项添加颜色变化和动画。此外，还提供了一个jQuery Easing插件来丰富动画效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jquery练习例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动导航条</title>
    <meta name="keywords" content="水平导航,景左右移动导航">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
    <div id="menu">
        <ul>
            <li> <a href="">Web Design </a> </li>
            <li> <a href="">jQuery</a> </li>
            <li> <a href="">Html5 & Css3</a> </li>
            <li> <a href="">PHP</a> </li>
            <li> <a href="">Photoshop</a> </li>
            <li> <a href="">Illustrator</a> </li>
            <li> <a href="">Wordpress</a> </li>
            <li> <a href="">Tutorials</a> </li>
            <li> <a href="">Tutorialpot</a> </li>
        </ul>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
</body>
</html>


css页面 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;

}
body {
	line-height: 21px;
	background-color: #373737;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* end eric meyer css reset */


/* =Layout
--------------------------------------------------------------------------------------------------------*/
html, body {
	font-family:Georgia, Arial, sans-serif;
	color: #FFF;
	font-size: 12px;
	line-height: 21px;
}
a:link, a:visited, a:active {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
#wrapper{
    width:800px;
    margin:15% auto;
    position: relative;
    top:0;
    left:0;
}
/* =Menu
------------*/
#menu{
    float: left;
    position: relative;
    top:0;
    left:0;
    overflow:hidden;
}
#menu .colourful{
    display: block;
    position: absolute;
    background:#f0ad22;
    height: 38px;
    width: 85px;
    top:4px;
    left:-100px;
}
#menu ul{
    list-style: none;
    float: left;
    position: relative;
    top:0;
    left: 0;
    z-index: 1;
}
#menu ul li{
    float: left;
    margin:0 1px 0 0;
}
#menu ul li a{
    color: #c4c4c4;
    text-align: center;
    display: block;
    border:solid;
    border-width: 4px 0 0;
    line-height: 40px;
    width:85px;
}
#menu ul li a:hover{
    text-decoration: none;
    color: #fff;
    text-shadow: 0 0 1px #999;
}

easing.js 一个js插件 

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend(M jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		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;
	}
});

init.js 

jQuery(document).ready(function($) {

	/*define easing you can omit this if
	you don't want to use the easing plugin*/
jQuery.easing.def = "easeInOutBack";

	/* create the span tht will be animated across the menu*/
	/* declare our many variables for easy ref*/
		var $span = $('<span class="colourful"></span>');
		$span.insertBefore($("#menu ul"));

		var $menu_link = $('#menu li a'),
		$hovered =  $('#menu a.hovered'),/**/
		$hovered_pos = $hovered.position();/*position of hovered menu item*/

		/* declare our many colors that can confuse a chameleon*/
		var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];

		/*iterate through all menu links and apply colors to border top */
		$menu_link.each(function(index){
			$menu_link.eq(index).css('border-color',$colour_arr[index]);
		});

	/* all the magic happens here*/
	function init () {
		if($hovered_pos) {
				$span.css('left',$hovered_pos);
				var index = 0;
				/* search for the selected menu item*/
				for(var i=0; i<$menu_link.length; i++) {
					if($($menu_link[i]).hasClass('hovered')) {
						index = i;
					}
				}
				$span.css('background',$colour_arr[index]);
		}

		/*mouseenter funtion*/
		$menu_link.each(
			function( intIndex ){
				$(this).on (
					"mouseenter",
						function(event){

							var x = $(this).position('#menu');
							x = x.left;

								$span.css('background',$colour_arr[intIndex]);

							$span.stop();
							$span.animate({

								left: x
							  },600);
						}
					);

				}
		 );

		/* mouseout function*/
		$menu_link.each(
			function( intIndex ){
				$(this).on (
					"mouseleave",
						function(event){
							$span.stop();
						var x = -100;
						if($hovered_pos) {
							x = $hovered_pos;
							var index = 0;
							for(i=0; i<$menu_link.length; i++) {
								if($($menu_link[i]).hasClass('hovered')) {
									index = i;
								}
							}
								$span.css('background',colour_arr[index]);

						}

		  				$span.animate({

								left: x
							  },600);
						}
					);
				}
		 );
	}
	/* call init our function*/
	init();
});



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值