js实现鼠标滑入滑出背景透明度改变

最新推荐文章于 2022-08-08 16:54:26 发布

含笑一过

最新推荐文章于 2022-08-08 16:54:26 发布

阅读量3k

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/u013630488/article/details/50366731

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                    js实现鼠标滑入滑出背景透明度改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享</title>
</head>
<style type="text/css">
    body{padding:0;margin:0;}
    #n_content{width:200px;height:200px;background:red;opacity:0.3;filter:Alpha(opacity=30);}

</style>
<body>
<div id="n_content"></div>
<script type="text/javascript">
    window.onload = function(){
        var odiv = document.getElementById("n_content");
        odiv.onmouseover = function(){
            startMove(100);
        }
        odiv.onmouseout = function(){
            startMove(30);
        }
        var timer = null;
        var alpha = 30;
        function startMove(iTarget){
            var odiv = document.getElementById("n_content");
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = 0;
                if(alpha>iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(alpha==iTarget){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                    odiv.style.filter = 'alpha(opacity='+ alpha +')';
                    odiv.style.opacity= alpha/100;
                }

            },30);
        };

    }
</script>   
</body>
</html>