【JavaScript】淡出淡入和分享菜单

最新推荐文章于 2024-05-30 11:27:58 发布

Acrgi

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量33

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/Acrgi/article/details/129470291

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height: 200px;
            background-color: gray;
            position: absolute;
            left: 0px;
            top: 400px;
        }
        #div1 span{
            width: 17px;
            height: 65px;
            background-color: aqua;
            position: absolute;
            left: 100px;
            top: 68px;
            line-height: 20px;
        }
        #img1{
            width: 400px;
            height: 400px;
            opacity: 0.3;
            filter: alpha(opacity = 30);
        }
    </style>
    <script>
        var timer = null;
        var alpha = 30;
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oImg = document.getElementById("img1");
            //分享菜单            
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-100);
            }
            //淡入淡出
            oImg.onmouseover = function(){
                startMove1(100);
            }
            oImg.onmouseout = function(){
                startMove1(30);
            }
        }
        //分享菜单函数
        function startMove(iTarget){
            var oDiv = document.getElementById("div1");
            var speed = 5;
            if(oDiv.offsetLeft > iTarget){
                speed = -Math.abs(speed);
            }else{
                speed = Math.abs(speed);
            }
            clearInterval(timer);
            timer = setInterval(function(){
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            }, 30);
        }

        // function startMove2(){
        //     var oDiv = document.getElementById("div1");
        //     var speed = -5;
        //     clearInterval(timer);
        //     timer = setInterval(function(){
        //         if(oDiv.offsetLeft == -100){
        //             clearInterval(timer);
        //         }else{
        //             oDiv.style.left = oDiv.offsetLeft + speed + 'px';
        //         }
        //     }, 30);
        // }

        function startMove1(iTarget){
            var oImg = document.getElementById("img1");
            clearInterval(timer);
            var speed = 2;
            speed = iTarget > alpha ? Math.abs(speed) : -Math.abs(speed);
            timer = setInterval(() => {
                if(iTarget == alpha){
                    clearInterval(timer);
                }else{
                    alpha += speed;
                    //重新设置通明度
                    oImg.style.opacity = alpha / 100;
                    oImg.style.filter = `alpha(opacity = ${alpha})`;
                }
                
            }, 30);
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <span>分享到</span>
    </div>

    <img id = 'img1' src = "./img/猪王峡谷.png" alt="">
</body>
</html>