仿淘宝UED左侧导航跟随鼠标特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-24 16:41:34　-　阅:　-　评:0　-　积分:0

前几日在浏览淘宝UED官方博客时，发现其左侧导航跟随效果还不错，类似之前分享的css3导航特效之跟随鼠标一，当自己在真正写的时候却发现一个问题。原打算用纯css来实现效果，过渡就用css3就可以了，只是纯css中没有父级关系，无比的大坑啊！没有这个，我们有很多事情都干不了，最终只好用jquery来写了。来放张效果图：仿淘宝UED左侧导航跟随鼠标特效再来放案例源码：

完整源码

<!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=utf-8" />
<title>仿淘宝UED左侧导航跟随鼠标特效--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="左侧导航,鼠标跟随特效,导航特效,jquery鼠标特效,侧导航特效">
</head>
<style type="text/css">
*{margin:0;padding:0}
body{background-color: #f8f8f8;}
ul{list-style-type:none}
a{text-decoration:none;display:block;}
img{border:0}
.nav{position:fixed;width:220px;background-color:#fff;border-radius:0 0 2px 2px; left:300px}
.logo{background: rgb(255,153,153);text-align: center}
.nav .nav-bg{position:absolute;top:-1px;left:-7px;z-index:11;width:227px;height:41px;border-left:7px solid #ff5f3e;background-color:#f8f8f8;_display:block;}
.nav .menu{position:relative;z-index:10;text-indent:39px;margin-top:27px;cursor: pointer;}
.nav .menu li{position:relative;z-index:12;border-top:1px solid #f8f8f8}
.nav .menu li *{_zoom:1}
.nav .menu .wu{border-top:0}
.nav .menu a{padding:9px 0;color:#606566;font-size:14px;line-height:21px;}
.nav .menu a:hover,.nav .menu li.hover a{color:#ff5f3e;}
.nav .menu .sub-menu a{font-size:13px;text-indent:71px}
</style>
<body>
<div class="nav">
<a class="logo" href="http://www.yilingsj.com" target="_blank" ><img src="http://www.yilingsj.com/skin/yilingsj/image/logo1.png" title="艺灵设计--专注前端学习，前端知识分享" alt="艺灵设计--专注前端学习，前端知识分享"></a>
<ul class="menu">
<li class=" wu"><a href="#">首页</a></li>
<li><a href="http://www.yilingsj.com/flash/">flash动画</a>
<ul class="sub-menu">
<li><a href="http://www.yilingsj.com/flash/flashwz/">flash文字特效</a></li>
<li><a href="http://www.yilingsj.com/flash/flashsb">flash鼠标特效</a></li>
<li><a href="http://www.yilingsj.com/flash/flashsl">flash实例</a></li>
<li><a href="#http://www.yilingsj.com/flash/flashxc">flash相册</a></li>
</ul>
</li>
<li><a href="http://www.yilingsj.com/div/">div+css</a>
<ul class="sub-menu">
<li><a href="http://www.yilingsj.com/e/tags/?tagid=47">ie6 bug</a></li>
</ul>
</li>
<li><a href="http://www.yilingsj.com/css3">css3特效</a>
<ul class="sub-menu">
<li><a href="http://www.yilingsj.com/css3/2013-08-04/70.html" title="css3边框阴影效果" target="_blank" >css3边框阴影效果</a></li>
</ul>
</li>
<li><a href="http://www.yilingsj.com/jquery">jquery特效</a></li>
<li><a href="http://www.yilingsj.com/code/">懒人代码</a>
<ul class="sub-menu">
<li><a href="http://www.yilingsj.com/e/tags/?tagid=156" target="_blank" title="淘宝店铺装修" >淘宝店铺装修</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=404" target="_blank" title="全屏模板框架" >全屏模板框架</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=286" target="_blank" title="修改改淘宝销量" >修改改淘宝销量</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=284" target="_blank" title="淘宝漏洞" >淘宝漏洞</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=179" target="_blank" title="10px问题" >10px问题</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=405" target="_blank" title="footer-more-trigger" >footer-more-trigger</a></li>
<li><a href="http://www.yilingsj.com/e/tags/?tagid=399" target="_blank" title="c店完全自定义" >c店完全自定义</a></li>
</ul>
</li>
<span class="nav-bg"></span>
</ul>
</div>
<script type="text/javascript" src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var $bg=$('.nav-bg');/*变量背景*/
var $li=$('.menu li');/*变量li*/
$li.mouseover(function(){/*鼠标滑过时执行内容*/
var $xh=$('li').index(this);/*取鼠标滑过时的索引值*/
var $t=($li.height()+1)*$xh-1;/*取li的高度，-1是减掉顶边框的1px*/
$bg.stop().animate({top:$t},150);/*执行动画*/
return false;/*如果去掉这个的话，li里面的li会取不到正确的索引值！*/
}).mouseleave(function(){/*鼠标移开时执行内容*/
$bg.stop().animate({top:(-1)},150);/*移开后就恢复到原始位置，由于原始位置是-1；可直接标出，实际情况中可再进行定位*/
})
});
</script>
</body>
</html>

查看淘宝官方的源码时，发现源码还可以进行简写。例如：官方的鼠标滑过跟随用了两个标签，外层div做背景，内层span做左侧的橙色条。在艺灵提供的案例源码中，只用一个span就搞定了。此时可能有亲在猜艺灵是如何实现的，难道是利用了:before等伪对象？当然不是了，这种伪对象只支持ie8以上版本，其实艺灵是这么做的：border-left:7px solid #ff5f3e;background-color:#f8f8f8怎么样，又是巧妙的利用了边框，不得不说边框还是有很强大功能的哈。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-07-24/179.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！