脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery的animate方法制作滑动菜单,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:https://www.cnblogs.COM/zivxiaowei/p/3462964.htML。是通过jqury的aniMATE方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。
正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:
代码如下,在代码进行注释说明:
<!DOCTYPE html>
<html XMlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<tITle></title>
<style type="text/css">
body, #nav, #nav1 {
margin:0px;
}
#navigation li {
float:left;
list-style-type:none;
width:80px;
height:50px;
}
#navigation li a.navlink {
text-decoration:none;
width:80px;
height:25px;
line-height:25px;
display:inline-block;
position:relative;
overflow:hidden;
text-align:center;
}
#navigation li .nav_title {
position:absolute;
top:0;
z-index:1000;
}
#navigation li .hover_bg {
position:absolute;
top:25px;
background-color:#5aB2Ce;
height:25px;
width:80px;
border:1px solid #ced7ce
border-radius:4px;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="navigation">
<li><a class="navlink" href="#">
<p class="nav_title">博客园</p>
<p class="hover_bg"></p>
</a></li>
<li><a class="navlink" href="#">
<p class="nav_title">首页</p>
<p class="hover_bg"></p>
</a></li>
<li><a class="navlink" href="#">
<p class="nav_title">博问</p>
<p class="hover_bg"></p>
</a></li>
<li><a class="navlink" href="#">
<p class="nav_title">闪存</p>
<p class="hover_bg"></p>
</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("#navigation li").hover(function () {
$(this).find(".hover_bg").animate({
top:"0px"
},"fast");
}, function () {
$(this).find(".hover_bg").animate({
top: "25px"
}, "fast");
});
});
</script>
</body>
</html>
工作原理大致:在a标签中设置2个p,一个是导航条的标题,另外一个就是要向上滑动的层。为了一开始不出现滑动的层,所以对a标签的position设置为relative,并且overflow设置为hidden,不能对li进行hidden,因为一般情况下,导航条下有下拉菜单。对2个p的position设置为absolute。然后在hover的方法里面,对hover_bg这个层的top值进行动画变化,达到背景色块向上运动的一个交互效果。在动画时间设置上,我写的是“fast”,在3个浏览器上测试,动画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-使用jQuery的animate方法制作滑动菜单全部内容,希望文章能够帮你解决javascript代码实例教程-使用jQuery的animate方法制作滑动菜单所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。