横向滚动jQuery导航滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是横向滚动jQuery导航滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>横向滚动jQuery导航代码</title>
<link rel="stylesheet" href="css/test.css" type="text/css"/>
<script type="text/javascript" src="js/JQ.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>

<body>
<br><br><br><br>
<div align="center">
<div class="nav">
    <ul>
        <li class="cur"><a href="#">首页</a></li>
        <li><a href="#">矢量素材</a></li>
        <li><a href="#">PNG图标</a></li>
        <li><a href="#">JS代码</a></li>
        <li><a href="#">PSD素材</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>  
</div>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function(){
	var $liCur = $(".nav ul li.cur"),curP = $liCur.position().left,curW = $liCur.outerWidth(true),$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(true),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");
}
);
}
)

CSS代码(test.css):

@charset "utf-8";/* CSS Document */
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;}

附件:下载该文件资源,减少时间成本(增值服务)