弹性十足的横向弹出菜单特效代码

稿源：互联网 2022-04-02 21:36:42 点击： 38916 撤稿纠错

跟JQ那弹性效果有得一拼的弹出菜单效果。

以下讨论的是和弹性横向弹出菜单相关的弹性十足的横向弹出菜单特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>
            弹性十足的横向弹出菜单特效代码_阿里西西特效
        </title>
        <style>
            *{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type:
            none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px;
            height:50px; overflow:hidden; font-size:16px; text-align:center; cursor:
            pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px;
            line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37}
            .co2{ background:#028fbc}
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var oUl = document.getElementById("nav");
                var aLi = oUl.getElementsByTagName("li");
                var i = 0;
                for (i = 0; i < aLi.length; i++) {
                    aLi[i].timer = null;
                    aLi[i].speed = 0;
                    aLi[i].onmouseover = function() {
                        startMove(this, 250);
                    };
                    aLi[i].onmouseout = function() {
                        startMove2(this, 100);
                    };
                }
            };

            function startMove(obj, iTarget) {
                if (obj.timer) {
                    clearInterval(obj.timer);
                }
                obj.timer = setInterval(function() {
                    doMove(obj, iTarget);
                }, 30)
            };

            function doMove(obj, iTarget) {
                obj.speed += 3;
                if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
                    clearInterval(obj.timer);
                    obj.timer = null;
                }
                else {
                    if (obj.offsetWidth + obj.speed >= iTarget) {
                        obj.speed *= -0.7;
                        obj.style.width = iTarget + "px";
                    }
                    else {
                        obj.style.width = obj.offsetWidth + obj.speed + "px";
                    }
                }
            };

            function startMove2(obj, iTarget) {
                if (obj.timer) {
                    clearInterval(obj.timer);
                }
                obj.timer = setInterval(function() {
                    doMove2(obj, iTarget);
                }, 30)
            };

            function doMove2(obj, iTarget) {
                obj.speed -= 3;
                if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
                    clearInterval(obj.timer);
                    obj.timer = null;
                }
                else {
                    if (obj.offsetWidth + obj.speed <= iTarget) {
                        obj.speed *= -0.7;
                        obj.style.width = iTarget + "px";
                    }
                    else {
                        obj.style.width = obj.offsetWidth + obj.speed + "px";
                    }
                }
            };
        </script>
    </head>
    
    <body>
        <ul id="nav" class="naver">
            <li class="co1">
                <a href="http://www.alixixi.com">首页</a>
            </li>
            <li class="co2">
                <a href="http://www.alixixi.cn">素材</a>
            </li>
            <li class="co1">
                <a href="http://js.alixixi.com">特效</a>
            </li>
            <li class="co2">
                <a href="http://down.alixixi.com">源码</a>
            </li>
            <li class="co1">
                <a href="http://www.alixixi.cn/dvd/">光盘</a>
            </li>
        </ul>
    </body>

</html>

关于弹性十足的横向弹出菜单特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2012041980141.shtml方便下次再访问哦。

·上一篇： 鼠标点击展开的下拉列表特效
·下一篇： 获取构造函数的属性js特效示例

弹性十足的横向弹出菜单特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻