【jquery练习】横向滚动导航菜单

最新推荐文章于 2022-01-17 13:59:53 发布

weixin_30619101

最新推荐文章于 2022-01-17 13:59:53 发布

阅读量263

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lans/archive/2013/01/29/2881670.html

版权

<!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>横向滚动导航菜单</title>
<style type="text/css">
body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,h1,h2,h3,h4,h5,h6,p,pre,table,caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;font-weight:normal;font-family:inherit}
ol,ul,li{list-style:none;}
img{margin:0;padding:0;border:none}
table{border-collapse:collapse;}
.cls{clear:both;}
.notxt{text-indent:-9999px;}
body{font-size:14px;font-family:Tahoma;font-family:Arial, Hel,Microsoft YaHei;}
a{color:#000;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
a:hover{color:#FF0000;}
i { font-style:normal;}

.nav {width:980px;margin:0 auto; position:relative;}
.nav ul li {float:left;padding:0 20px;text-align:center;height:40px;line-height:40px;}
.curBg { background:#F00;height:3px;position:absolute;bottom:0;width:68px;left:0px;}
</style>
</head>
<body>

<div class="nav">
    <ul>
        <li class="cur"><a href="#">首页</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">矢量素材</a></li>
    </ul>
   <div class="curBg"></div>
   <div class="cls"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   var $liCur = $(".nav ul li.cur"),
      curP = $liCur.position().left,
      curW = $liCur.outerWidth(),
      $slider = $(".curBg"),
      $navBox = $(".nav");
   $targetEle = $(".nav ul li a"),
   $slider.animate({
      "left":curP,
      "width":curW
   });
   $targetEle.mouseenter(function () {
      var $_parent = $(this).parent(),
       _width = $_parent.outerWidth(),
       posL = $_parent.position().left;
      $slider.stop(true, true).animate({
       "left":posL,
       "width":_width
      }, "fast");
   });
   $navBox.mouseleave(function (cur, wid) {
      cur = curP;
      wid = curW;
      $slider.stop(true, true).animate({
       "left":cur,
       "width":wid
      }, "fast");
   });
})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/lans/archive/2013/01/29/2881670.html

weixin_30619101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery练习】横向滚动导航菜单

<!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><me...
复制链接

扫一扫