web前端多物体多运动

最新推荐文章于 2024-04-24 12:29:08 发布

OrdnAry

最新推荐文章于 2024-04-24 12:29:08 发布

阅读量250

点赞数

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

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

版权

学习专栏收录该内容

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>
        div{width: 100px; height: 50px; background-color: red; margin: 80px;opacity: 0.3; filter: alpha(opacity=30);}
    </style>
    <script>
        window.onload = function(){
            var odivs = document.getElementsByTagName("div");
            for(var i = 0; i < odivs.length; i++){
                odivs[i].alpha = 30;
                odivs[i].onmouseover = function(){
                   Move(this,300,100);
                } 
                odivs[i].onmouseout = function(){
                   Move(this,100,30);
                } 
            }
        }
        // var timer = null;
        function Move(node,itarget,opacity){
            // var odivs = document.getElementsByTagName("div");
            clearInterval(node.timer);
            node.timer = setInterval(function(){
                var speed = (itarget - node.offsetWidth)/8;
                speed = speed >0 ? Math.ceil(speed) :Math.floor(speed);

                if(node.offsetWidth == itarget){
                    clearInterval(node.timer);
                }else{
                    node.alpha +=speed;
                    node.style.width = node.offsetWidth + speed + "px";
                    node.style.opacity = node.alpha/100;
                    node.style.filter = `alpha(opacity=${node.alpha})`;
                }
            },30);
        }
    </script>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</body>
</html>

在这里插入图片描述

多物体多运动的不同样式的运动

<!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>
        div{width: 100px; height: 50px; background-color: red; margin: 80px;}
    </style>
    <script>
        window.onload = function(){
            var odivs = document.getElementsByTagName("div");
            
                odivs[0].onclick = function(){
                   Move(this,"width",300);
                } 
                odivs[1].onclick = function(){
                   Move(this,"height",300);
                } 
                odivs[2].onclick = function(){
                   Move(this,"marginLeft",300);
                }
                odivs[3].onclick = function(){
                   Move(this,"fontSize",30);
                }
            
        }
        // var timer = null;
        function Move(node,shuxing,itarget){
            // var odivs = document.getElementsByTagName("div");
            clearInterval(node.timer);
            node.timer = setInterval(function(){
                
                var iCur =parseInt(getStyle(node,shuxing));
                var speed = (itarget - iCur)/8;
                speed = speed >0 ? Math.ceil(speed) :Math.floor(speed);

                if(iCur == itarget){
                    clearInterval(node.timer);
                }else{
                    node.style[shuxing] = iCur + speed + "px";
                }
            },30);
        }
        function getStyle(node, cssStr){
                return node.currentStyle ? node.currentStyle[cssStr] : getComputedStyle(node)[cssStr];
            }
    </script>
</head>
<body>
        <div></div>
        <div></div>
        <div></div>
        <div>aa</div>
</body>
</html>

在这里插入图片描述