一款jquery编写的滑动菜单效果

最新推荐文章于 2020-10-20 17:14:33 发布

web前端狗

最新推荐文章于 2020-10-20 17:14:33 发布

阅读量170

点赞数

分类专栏：原创文章标签：前端 css jquery 菜单导航 ViewUI

原创专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是一款jquery编写的滑动菜单效果，当点击导航文字时，圆形按钮滑动到当前位置。圆形按钮能根据导航文字的多少自动伸缩。

文件夹中有两个文件，一个是slider_click.html，意思是点击某个选项时滚动。还有一个是slider_hover.html，意思是鼠标移动到某个选项时滚动。有人会问‘不是把click改成hover’不就行了么，但改成hover后会出现一个问题：鼠标不停离开上一个li，进入下一个li，滚动就不停执行。如果从‘日志’移动到‘互动空间’，移动就会停顿两次。为了解决这个问题，slider_hover.html里又增加了一段代码，控制鼠标停止运动时才执行。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
	$(function(){
	
		$cur=$('.menu').find('.cur');
		$li=$('.menu').find('li');
		var lastLen=0;//记录前次的距离
		var step=0;//圆角形状惯性奔出的距离
		$li.click(function(){
		
				var $index=$(this).index();
				var length=0;
				var m=0;
				$(this).find('a').blur();
				$('#content').empty().append($(this).find('a').html());//将文本加入撑宽容器
				for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
				{
					length+=$li.eq(i).width()+40;
				}
				length+=28;//加入初始边距
				if(length>lastLen){//如果向右运动，step为正					
					step=30;
				}
				else{
					step=-30;
				}
					
				lastLen=length;//保存此次的距离
				$cur.animate({left:length+step},200,function(){  $cur.animate({left:length},200)    });
			
			})
	
	})

</script>
<style type="text/css">
	ul,li,ol{ margin:0px;padding:0px;list-style:none}
	.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
	.nav li.nav_l{ background-position:0px 0px }
	.nav li.nav_m{ width:670px;background-position:0px -98px }
	.nav li.nav_r{ background-position:0px -49px }
	.nav .menu{ position:relative;height:20px;}
	.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat;  }
	.nav ol { float:left;margin-top:13px; }
	.nav ol li{ background:none;text-align:center;margin-left:40px }
	.nav ol li.size2 a,.nav ol li.size2{ width:44px }
	.nav ol li.size4 a,.nav ol li.size4{ width:80px }
	.nav .menu a.item0{ background-position:5px 0px }
	.nav .menu a.item1{ background-position:-79px 0px }
	.nav .menu a.item2{ background-position:-150px 0px }
	.nav .menu a.item3{ background-position:-223px 0px }
	.nav .menu a.item4{ background-position:-294px 0px }
	.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
	.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
	.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px } 
	.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
	.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>


<body>

	<div class="nav">
		<ul>
        	<li class="nav_l"></li>
            <li class="nav_m">
            	<div class="menu">
                		<div class="cur">
                        	<div class="cur_l"></div>
                            <div id="content" class="cur_m">首页</div>
                            <div class="cur_r"></div>	
                        </div>
                        <ol>	
                            <li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
                            <li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
                            <li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
                            <li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
                            <li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
                            <li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
                            <li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
                        </ol>
                </div>
            </li>
            <li class="nav_r"></li>
        </ul>
    </div>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>目标滑动到当前位置</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
	var e;//当前li元素的索引值
	var lastLen=0;//记录前次的距离
	var step=0;//圆角形状惯性奔出的距离
	var posi;//计时运动
	function slide(){
		
				var $index=e;
				var length=0;
				var m=0;
				$li.eq(e).find('a').blur();
				
				for(var i=0;i<$index;i++)//累加宽度和边距值为运动距离
				{
					length+=$li.eq(i).width()+40;
				}
				length+=28;//加入初始边距
				if(length>lastLen){//如果向右运动，step为正					
					step=30;
				}
				else{
					step=-30;
				}
					
				lastLen=length;//保存此次的距离
				clearInterval(posi) ;
				$cur.animate({left:length+step},200,function(){ $cur.animate({left:length},100)   });
				$('#content').empty().append($li.eq(e).find('a').html());//将文本加入撑宽容器
			
			}
			

	$(function(){
	
		$cur=$('.menu').find('.cur');
		$li=$('.menu').find('li');
		$li.mousemove(function(){   //当鼠标移动时，不执行posi，当鼠标静止100毫秒时posi执行。
									//添加这段的目的是防止鼠标在导航上移动时，因为不停离开上一个li，进入下一个li而不停执行posi，造成运动断断续续。
			
			clearInterval(posi);
			e=$(this).index();//记录当前元素的索引值
			posi=setInterval('slide()',100);
		
		}).mouseout(function(){ clearInterval(posi)})
	
	})

</script>
<style type="text/css">
	ul,li,ol{ margin:0px;padding:0px;list-style:none}
	.nav li{ width:12px;height:48px;overflow:hidden;float:left;background:url(images/nav_bg.gif) }
	.nav li.nav_l{ background-position:0px 0px }
	.nav li.nav_m{ width:670px;background-position:0px -98px }
	.nav li.nav_r{ background-position:0px -49px }
	.nav .menu{ position:relative;height:20px;}
	.nav .menu a{ height:20px;line-height:200px;display:block;float:left;overflow:hidden;position:relative;z-index:200; background:url(images/nav_menu.png) no-repeat;  }
	.nav ol { float:left;margin-top:13px; }
	.nav ol li{ background:none;text-align:center;margin-left:40px }
	.nav ol li.size2 a,.nav ol li.size2{ width:44px }
	.nav ol li.size4 a,.nav ol li.size4{ width:80px }
	.nav .menu a.item0{ background-position:5px 0px }
	.nav .menu a.item1{ background-position:-79px 0px }
	.nav .menu a.item2{ background-position:-150px 0px }
	.nav .menu a.item3{ background-position:-223px 0px }
	.nav .menu a.item4{ background-position:-294px 0px }
	.nav .menu .cur{ height:32px; position:absolute;left:28px;top:9px; z-index:100; }
	.nav .menu .cur div{ height:32px;float:left;background:url(images/nav_menu_cur.png) }
	.nav .menu .cur .cur_l{ width:15px;background-position:0px 0px } 
	.nav .menu .cur .cur_m{ height:32px;overflow:hidden;padding:0px 3px;line-height:200px;background-position:0px -30px }
	.nav .menu .cur .cur_r{ width:15px;background-position:0px -62px }
</style>
</head>


<body>

	<div class="nav">
		<ul>
        	<li class="nav_l"></li>
            <li class="nav_m">
            	<div class="menu">
                		<div class="cur">
                        	<div class="cur_l"></div>
                            <div id="content" class="cur_m">首页</div>
                            <div class="cur_r"></div>	
                        </div>
                        <ol>	
                            <li class="size2"><a class="item0" href="javascript:void(0)">首页</a></li>
                            <li class="size2"><a class="item1" href="javascript:void(0)">日志</a></li>
                            <li class="size2"><a class="item2" href="javascript:void(0)">相册</a></li>
                            <li class="size2"><a class="item3" href="javascript:void(0)">微博</a></li>
                            <li class="size4"><a class="item4" href="javascript:void(0)">互动空间</a></li>
                            <li class="size2"><a class="item2" href="javascript:void(0)">留言</a></li>
                            <li class="size2"><a class="item3" href="javascript:void(0)">私信</a></li>
                        </ol>
                </div>
            </li>
            <li class="nav_r"></li>
        </ul>
    </div>

</body>
</html>