滑动的导航条

最新推荐文章于 2021-07-16 10:24:18 发布

lucky芬

最新推荐文章于 2021-07-16 10:24:18 发布

阅读量330

点赞数

分类专栏：练手小案例

练手小案例专栏收录该内容

42 篇文章 2 订阅

订阅专栏

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