使用jQuery的animate方法制作滑动菜单

周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html。是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。

正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:

。Demo地址:http://liminjun.sinaapp.com/demo/navigation_animate/

代码如下,在代码进行注释说明:

<!DOCTYPE html>
<html xmlns="http://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="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <ul id="navigation">
        <li><a class="navlink" href="#">
            <div class="nav_title">博客园</div>
            <div class="hover_bg"></div>
            </a></li>
        <li><a class="navlink" href="#">
            <div class="nav_title">首页</div>
            <div class="hover_bg"></div>
            </a></li> 
        <li><a class="navlink" href="#">
            <div class="nav_title">博问</div>
            <div class="hover_bg"></div>
            </a></li>
        <li><a class="navlink" href="#">
            <div class="nav_title">闪存</div>
            <div class="hover_bg"></div>
            </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>
   .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; }

工作原理大致:在a标签中设置2个div,一个是导航条的标题,另外一个就是要向上滑动的层。为了一开始不出现滑动的层,所以对a标签的position设置为relative,并且overflow设置为hidden,不能对li进行hidden,因为一般情况下,导航条下有下拉菜单。对2个div的position设置为absolute。然后在hover的方法里面,对hover_bg这个层的top值进行动画变化,达到背景色块向上运动的一个交互效果。在动画时间设置上,我写的是“fast”,在3个浏览器上测试,动画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。

PS:

1.估计是年底了,网页很多被运营商劫持了,当然也有可能是我的电脑中毒了。如下图所示的广告,我点击关闭按钮,直接跳转到一个游戏注册页面。无语了,截图为证,上海10M电信宽带。

2.大家平时写博客的时候,或多或少都要插入代码,但是不要勾选“插入代码行数”,这个东西作用真的不大,而已博客园目前没有提供一个好的复制功能,直接copy代码过去,都带有行号,不方便其他用户修改和运行你的代码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

03-保存

存储所需内容 ctrl+c ctrl+n ctrl+v 或者直接拖动文件至新文件

882
来自专栏程序你好

提高JavaScript动画的性能

1032
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

这个样式相信大家早已不陌生了,有关这个样式的实现估计很多人不太清楚,下面让我带大家来学习一下这个样式的实现~

1184
来自专栏移动开发

小trick之tools

以前写布局时为了观看布局效果,会写些静态的测试数据,以便在androidstudio中观察布局的效果.等到写完布局的时候在进行擦除.当布局很多的时候,这确实也是...

1092
来自专栏编程微刊

小程序点击轮播图跳转到tab导航界面

一切准备好之后,在wxml文件里面,我们要使用 bindtap在图片上绑定一个事件,在js里面写事件函数的具体操作。

2762
来自专栏V站

javascript实现background 定时循环随机背景图

这里用的固定地址,用的新浪图床,喜欢的话可以自己扩充图片,我这里简短的展示了10个图片!

1573
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点,就是页面在第一次进入的时候,会进行一次很明显的DOM重绘——页面会闪一下。 尤其是前端...

3517
来自专栏iKcamp

React 深入系列2:组件分类

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列2:组件分类 React 深入系列,深入讲解了...

3945
来自专栏coding for love

CSS入门11-定位与覆盖

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1182
来自专栏娱乐心理测试

移动端图标生成工具

1290

扫码关注云+社区

领取腾讯云代金券