javascript代码实例教程-使用jQuery的animate方法制作滑动菜单

发布时间:2019-02-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-使用jQuery的animate方法制作滑动菜单脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:https://www.cnblogs.COM/zivxiaowei/p/3462964.htML。是通过jqury的aniMATE方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。

 

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

 

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

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

 

<!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,请注明来意。