前端开发案例--360首页左右滑动导航

废话不多说，直接分享效果图：



案例思路：

所有的li元素定位在ul的左侧（第一个除外）;

每次触发事件，为对应的导航项添加对应的样式；

判断当前导航项与前一个导航项的索引大小，进行对应的动画（使用CSS（）立即定位是重点！）；

将当前导航项索引赋值给前一索引值。

注意点：布局的实现，解决jQuery“动画积累”问题！

Jquery解决“动画积累”问题：/article/2576481.html

涉及知识：addClass()、removeClass()、siblings()、index()】eq()、stop()、animate()、css()

$("element").stop([clearQueue][,gotoEnd]);

clearQueue：bool，代表是否要清空未执行的动画队列

gotoEnd：bool，代表将正在执行的动画直接跳到末状态

HTML代码：

<!-- 总容器 -->
<div class="web">
<!-- 图片容器 -->
<div class="con">
<ul>
<li style="left:0px;"><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
<li><img src="images/5.png" /></li>
<li><img src="images/6.png" /></li>
</ul>
</div>
<!-- 图片容器 -->
<!-- 导航项 -->
<div class="nav">
<ul>
<li class="bg">360安全卫士</li>
<li>360杀毒</li>
<li>360手机卫士</li>
<li>360浏览器</li>
<li>360手机助手</li>
<li class="last">360企业安全产品</li>
</ul>
</div>
<!-- 导航项 -->
</div>

CSS代码：

*{margin:0px;padding:0px;}
.web{width:100%;height:250px;background:url("images/bg.png");}
.con{width:960px;height:212px;background:url("images/bg.png");margin:0 auto;overflow:hidden;position:relative;}
.con ul li{list-style-type:none;width:960px;height:212px;
position:absolute;left:-960px;top:0px;}
.nav{width:970px;height:38px;margin:0 auto;}
.nav ul li{width:160px;height:38px;list-style-type:none;color:#fff;float:left;line-height:38px;text-align:center;font-weight:bold;border-left:1px solid #fff;cursor:pointer;}
.nav ul .last{border-right:1px solid #fff;}
.nav ul .bg{background:#B5E19B;}

jQ代码：

<script type="text/javascript">
var d=0; //当前点击的li的下标
var z=0; //之前点击的li的下标
$(".nav ul li").mousemove(function(){
$(this).addClass("bg").siblings().removeClass("bg");
d=$(this).index();
//当前项>前一项,则前一项左移，立刻定位当前想到最右侧，再进行右移。
if(d>z)
{
$(".con ul li").eq(z).stop(true).animate({left:"-960px"},500);
$(".con ul li").eq(d).css("left","960px");
$(".con ul li").eq(d).stop(true).animate({left:"0px"},500);
z=d;
}//否则相反
else if(d<z)
{
$(".con ul li").eq(z).stop(true).animate({left:"960px"},500);
$(".con ul li").eq(d).css("left","-960px");
$(".con ul li").eq(d).stop(true).animate({left:"0px"},500);
z=d;
}

})
</script>

总结：这是之前的案例实践，在jQ性能优化方面很有可提升，例如使用变量来存储DOM节点，减少对DOM的遍历操作，更改为其他事件触发等。