找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发导航栏_缓动动画

2018-12-03 分类：教程 阅读(584) 评论(0)
pc 前端开发框架
网站前端 快速开发框架
前端开发ui框架

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8″ />
        <style type=”text/css”>
            ul,
            li {
                padding: 0;
                margin: 0;
            }
            li {
                list-style: none;
            }
            #box {
                height: 48px;
                width: 900px;
                background-color: #459df5;
                margin: 50px auto;
                position: relative;
            }
            #caution {
                width: 150px;
                height: 48px;
                background-color: #4b92d8;
                position: absolute;
                top: 0;
                left: 0;
            }
            #list {
                position: absolute;
            }
            #list li {
                width: 150px;
                height: 48px;
                float: left;
                color: #fff;
                font: 500 20px/48px ‘微软雅黑’;
                text-align: center;
                cursor: pointer;
            }
        </style>
        <script type=”text/javascript”>
            window.onload = function() {
                //获取ul ID
                var oUl = document.getElementById(‘list’)
                // 获取span ID
                var caution = document.getElementById(‘caution’)
                //获取ul 所有孩子
                var aLi = oUl.children
                //定时器管理
                var timer = null
                //缓动
                var leader = 0
                var target = 0
                //停留
                var current = 0
                for (var i = 0; i < aLi.length; i++) {
                    //鼠标移动
                    aLi[i].onmouseover = function() {
                        //关闭定时器
                        clearInterval(timer)
                        //获取当前的left值
                        target = this.offsetLeft
                        //开启定时器
                        timer = setInterval(autoCaution, 20)
                    }
                    //鼠标点击
                    aLi[i].onmousedown = function() {
                        //清楚所有高亮的文字
                        for (var j = 0; j < aLi.length; j++) {
                            aLi[j].style.color = ‘#fff’
                        }
                        //当前点击栏变为红色
                        this.style.color = ‘#ccc’
                        //提示框
                        current = this.offsetLeft
                        caution.style.left = current + ‘px’
                    }
                }
                //鼠标离开
                oUl.onmouseout = function() {
                    //关闭定时器
                    clearInterval(timer)
                    target = current
                    timer = setInterval(autoCaution, 20)
                }
                //缓动动画
                function autoCaution() {
                    leader = leader + (target – leader) / 10
                    caution.style.left = leader + ‘px’
                }
            }
        </script>
    </head>
    <body>
        <div id=”box”>
            <span id=”caution”></span>
            <ul id=”list”>
                <li>首页</li>
                <li>公司简介</li>
                <li>企业文化</li>
                <li>招贤纳士</li>
                <li>企业论坛</li>
            </ul>
        </div>
    </body>
</html>
nodejs 开发前端框架
php web前端开发框架
asp.net开发前端框架
赞(0)
前端开发者 » 前端开发导航栏_缓动动画
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论