鼠标移入分享菜单移出来鼠标移出菜单回去

最新推荐文章于 2022-11-10 20:16:59 发布

OrdnAry

最新推荐文章于 2022-11-10 20:16:59 发布

阅读量176

点赞数

分类专栏：学习文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/108258913

版权

学习专栏收录该内容

59 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0px; padding: 0px}
         #menu{width: 100px; height: 200px; background-color: gray; position: absolute; left: -100px; top: 200px}
         #menu span{width: 20px; height: 60px; line-height: 20px; background-color: yellow; position: absolute; left: 100px; top: 70px}
    </style>
    <script>
        window.onload = function(){
            var odiv = document.getElementById("menu");
            
            var timer = null;
            odiv.onmouseenter = function(){
                 //-100 -> 0
               Move(0);
            }
            odiv.onmouseleave = function(){
                //0->-100
               Move(-100);
            }
            function Move(iTarget){
                // var odiv = document.getElementById("menu");
                clearInterval(timer);
                var speed = 10;
                timer = setInterval(function(){
                    //判断速度的正负值
                    if(odiv.offsetLeft < iTarget){ 
                        speed =10;
                    }else{
                        speed =-10;
                    }
                    //如果和传入的距离相等了就清除定时器
                    if(odiv.offsetLeft == iTarget){
                    clearInterval(timer);
                    }else{
                    odiv.style.left = odiv.offsetLeft + speed +"px";
                    }
                },50);  
            }
        }
    </script>
</head>
<body>
    <div id = 'menu'>
        <span>分享到</span>
    </div>
</body>
</html>