<!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=gb2312" />
<title>jquery背景滑动导航菜单代码</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.movebg.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="wraper">
<div class="nav">
<ul>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">网站首页</a></li>
<li class="nav-item cur"><a href="http://www.jb51.net/" target="_blank">网上商城</a></li>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">智能管家</a></li>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">技术支持</a></li>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">应用案例</a></li>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">关于我们</a></li>
<li class="nav-item"><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
</ul>
<!--移动的滑动-->
<div class="move-bg"></div>
<!--移动的滑动 end-->
</div>
</div>
<script>
$(function(){
$(".nav").movebg({width:120/*滑块的大小*/,extra:40/*额外反弹的距离*/,speed:300/*滑块移动的速度*/,rebound_speed:400/*滑块反弹的速度*/});
})
</script>
<!-- 代码 结束 -->
</body>
</html>
