jQuery背景可滑动的导航菜单

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

<div class="nav">
    <ul>
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">网站首页</a></li>
        <li class="nav-item cur"><a href="http://www.sucaihuo.com/" target="_blank">网站模板</a></li>
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">网站psd</a></li>
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">网页特效</a></li> 
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">网站源码</a></li> 
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">精选网址</a></li>
        <li class="nav-item"><a href="http://www.sucaihuo.com/" target="_blank">有问必答</a></li>
    </ul>
    <!--移动的滑动-->
    <div class="move-bg"></div>
    <!--移动的滑动 end-->
</div>

引入jQuery.js和移动背景插件jquery.movebg.js

<script type="text/javascript" src="jquery.js"></script> 
<script src="js/jquery.movebg.js"></script>

调用movebg插件：

$(function() {
      $(".nav").movebg({width: 120/*滑块的大小*/, extra: 40/*额外反弹的距离*/, speed: 300/*滑块移动的速度*/, rebound_speed: 400/*滑块反弹的速度*/});
})