js多物体链式动画

最新推荐文章于 2019-11-07 17:52:17 发布

weixin_43403543

最新推荐文章于 2019-11-07 17:52:17 发布

阅读量215

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/weixin_43403543/article/details/96424612

版权

作业专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html+js

<!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>homework3</title>
    <link type="text/css" href="C:\Users\apple\Desktop\bluem\暑期培训\暑期前端第3次讨论班—运动\hw3\hw3.css" rel="stylesheet">
</head>
<body>
    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
</body>
<script>
    window.onload = function(){
        var aDiv = document.getElementsByTagName('div');
        
        for(var i =0;i<aDiv.length;i++){
            aDiv[i].onmouseover=function(){
                //多次回调move函数的时候，里层的this指向的是window而不是页面获取到的那个元素，不能直接用this传参
                //在外面重新定义一个变量,被谁调用就指向谁
                var a = this;
                startMove(a,'width',300,function(){
                    startMove(a,'height',300,function(){
                        startMove(a,'opacity',100);
                    });
                });
            }
            aDiv[i].onmouseout = function(){
                var a = this;
                startMove(a,'opacity',30,function(){
                    startMove(a,'height',100,function(){
                        startMove(a,'width',100);
                    });
                });
            }
         
        }
    }
    function getStyle(obj,attr) {
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    var timer = null;
    function startMove(obj,attr,iTarget,fn){
        var aDiv = document.getElementsByTagName('div');
        //为了避免定时器之间互相影响，为每个对象设置定时器obj.timer
        clearInterval(obj.timer);//把所有定时器清空，避免多次进入速度变快的情况
        obj.timer = setInterval(function(){
            //1.取当前值
            var icur = 0;
            if(attr == 'opacity'){
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }
            else{
                icur = parseInt(getStyle(obj,attr));
            }
            //2.算速度
            var speed = (iTarget-icur)/8;
            speed = speed >0?Math.ceil(speed):Math.floor(speed);
            //3.检测停止
            if(icur == iTarget){
                clearInterval(obj.timer);
                if(fn){
                    fn();//作为回调函数
                }
            }
            else{
                if(attr == 'opacity'){
                    obj.style.filter = 'alpha:(opacity:' + icur + speed +')';
                    obj.style.opacity = (icur+speed)/100;
                }
                else{
                    obj.style[attr] = icur + speed +'px';
                }
            }
        },30)
    }

</script>
</html>

css

*{
    margin: 0;
    padding: 0;
}
/* 防止因盒子间距造成的影响，不用margin控制边距，用绝对定位 */
div{
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    margin-right: 350px;
    background-color: rgb(87, 250, 209);
    text-align: center;
    /* filter: alpha(opacity:30); */
    opacity: 0.3;

}
#d1{
    left: 0;
}
#d2{
    left: 400px;
}
#d3{
    left: 800px;
}

效果
在这里插入图片描述

weixin_43403543

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js多物体链式动画

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

扫一扫