多物体运动2 透明度共享变量问题

最新推荐文章于 2024-05-24 20:10:02 发布

koukou0419

最新推荐文章于 2024-05-24 20:10:02 发布

阅读量63

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/koukou0419/article/details/80753643

版权

前端专栏收录该内容

72 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:50px;
            background-color:red;
            margin:30px;
            padding:0;
            opacity:0.3;
            filter:alpha(opacity:30);
        }
    </style>
</head>
<body>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <script>
        window.onload=function(){
            var div=document.getElementsByTagName('div');
            for(var i=0;i<div.length;i++){
                div[i].timer=null;
                div[i].alpha=0;
                //  把变量作为物体属性，防止多个物体共享一个变量
                div[i].onmouseover=function(){
                    startMove(this,100);
                };
                div[i].onmouseout=function(){
                    startMove(this,50);
                };
            }
           
        }
        // var timer=null;
        //var objOpacity=30;
        //opacity和timer一样，存在多个物体同时共享一个变量的问题；
        //把变量作为物体的一个属性解决此类问题
        //多物体运动的时候，切记不能公用变量
        function startMove(obj,target){
            //
            var speed=0;
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=0;
                speed=(target-obj.alpha)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(target==obj.alpha){
                    clearInterval(obj.timer);
                }else{
                    obj.alpha=obj.alpha+speed;
                    obj.style.filter='alpha(opacity:'+obj.alpha+')';
                    obj.style.opacity=obj.alpha/100;
                }
            },100);
            
        }
    </script>
</body>
</html>

koukou0419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多物体运动2 透明度共享变量问题

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫