周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html。是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。
正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:
代码如下,在代码进行注释说明:
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;
}
<script src="http://code.jquery.com/jquery-latest.js">《script》
上测试,动画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。