实用资源鼠标指向导航出现滑动效果的代码

鼠标指向导航出现滑动效果的代码

通过CSS的设置很容易实现鼠标指向链接时改变链接的背景颜色的效果,而有些企业网站的导航栏,当鼠标指向导航中的链接时,链接背景改变的同时还伴随滑动的效果,显得很有动感,本文所分享的特效代码即可实现这种效果:

导航滑动效果.gif

head部分代码
<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>

这里的reset.css为CSS重置,如果您的网页已经做过CSS重置则不需要重复引入。

body部分代码
<div class="wraper">
    <div class="nav">
     <ul>
       <li class="nav-item"><a href="#" target="_blank">网站首页</a></li>
       <li class="nav-item"><a href="#" target="_blank">网上商城</a></li>
       <li class="nav-item"><a href="#" target="_blank">智能管家</a></li>
       <li class="nav-item"><a href="#" target="_blank">技术支持</a></li> 
       <li class="nav-item"><a href="#" target="_blank">应用案例</a></li> 
       <li class="nav-item"><a href="#" target="_blank">关于我们</a></li>
       <li class="nav-item"><a href="#" target="_blank">联系我们</a></li>
     </ul>
     <div class="move-bg"></div>
    </div>
</div>
<script>
$(function(){
$(".nav").movebg({width:120/*滑块的大小*/,extra:30/*额外反弹的距离*/,speed:300/*滑块移动的速度*/,rebound_speed:200/*滑块反弹的速度*/});
})
</script>

这里在代码里可以自行修改滑块反弹的距离,以及滑动的速度和反弹的速度。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/99.html