JavaScript的多物体多方式运动------JavaScript学习之路18

最新推荐文章于 2021-03-01 20:24:12 发布

dragoned_123

最新推荐文章于 2021-03-01 20:24:12 发布

阅读量124

点赞数

分类专栏： JavaScript 文章标签： javascript css js html

本文链接：https://blog.csdn.net/dragoned_123/article/details/107524171

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

JavaScript的多物体多方式运动

JavaScript的多物体多方式运动

条件

每个物体有自己的周期函数和时间

如果公用一个timer变量，会导致第二个事件影响第一个事件的运动，下图第一次第一个的运动长度，要大于第二次的第一个运动长度，因为第二次的时候点击速度比较快在第一个的运动还没有结束第二个物体就触发了，解决方法就是每个物体有自己的定时器timer

在这里插入图片描述

let timer = null;//公用一个timer
ds[0].onclick = function () {
    domove(this,"width",300);
}
ds[1].onclick = function () {
    domove(this,"height",300);
}
ds[2].onclick = function () {
    domove(this,"opacity",100);
}

function domove(node,movname,target) {//封装了一个函数来控制宽高透明度的缓冲变化
    clearInterval(timer);
    timer = setInterval(function () {
        let wid = null;
        if(movname == "opacity"){
            wid = parseInt(parseFloat(getStyle(node,"opacity"))*100);//得到透明度
        }else {
            wid = parseInt(getStyle(node,movname));//注意吧px去掉
        }
        let speed = (target-wid)/8;//获得缓冲速度
        speed = speed>0? Math.ceil(speed):Math.floor(speed);
        if(wid == target){
            clearInterval(node.timer);//到达目的值就结束时间函数
        }else {
            if(movname == "opacity"){
                node.style.opacity = (wid + speed)/100;
                console.log(wid+speed);
                node.style.filter = "alpha(opacity="+wid+speed+")";//设置透明度
            }else {
                node.style[movname] = wid + speed + "px";//设置宽度或者高度
            }
        }
    },30);
}

每个物体有自己的样式，方便更改不同物体的不同样式

    if(movname == "opacity"){
        node.style.opacity = (wid + speed)/100;
        console.log(wid+speed);
        node.style.filter = "alpha(opacity="+wid+speed+")";//设置透明度
    }else {
        node.style[movname] = wid + speed + "px";//设置宽度或者高度
    }
}

比如说有三个div元素，我们需要鼠标经过第一个div时，宽变宽，第二个div时高变高，第三个div时，透明度增加到1，每次鼠标经过时各个滑块的运动不受影响

效果

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多物体多运动方式</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html{
            background-color: #cf69ff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #d1{
            position: relative;
            background-color: white;
            width: 600px;
            height: 600px;
        }
        #d1>div{
            position: absolute;
            margin-top: 20px;
            width: 60px;
            height: 60px;
            background-color: rebeccapurple;
            opacity: 0.3;
        }
    </style>
</head>
<body>
<div id="d1">
    <div style="top: 100px"></div>
    <div style="top: 200px"></div>
    <div style="top: 300px"></div>
</div>
<script>
    let d1 = document.getElementById("d1");
    let ds = d1.getElementsByTagName("div");
    ds[0].onclick = function () {
        domove(this,"width",300);
    }
    ds[1].onclick = function () {
        domove(this,"height",300);
    }
    ds[2].onclick = function () {
        domove(this,"opacity",100);
    }

    function domove(node,movname,target) {//封装了一个函数来控制宽高透明度的缓冲变化
        clearInterval(node.timer);
        node.timer = setInterval(function () {
            let wid = null;
            if(movname == "opacity"){
                wid = parseInt(parseFloat(getStyle(node,"opacity"))*100);//得到透明度
            }else {
                wid = parseInt(getStyle(node,movname));//注意吧px去掉
            }
            let speed = (target-wid)/8;//获得缓冲速度
            speed = speed>0? Math.ceil(speed):Math.floor(speed);
            if(wid == target){
                clearInterval(node.timer);//到达目的值就结束时间函数
            }else {
                if(movname == "opacity"){
                    node.style.opacity = (wid + speed)/100;
                    console.log(wid+speed);
                    node.style.filter = "alpha(opacity="+wid+speed+")";//设置透明度
                }else {
                    node.style[movname] = wid + speed + "px";//设置宽度或者高度
                }
            }
        },30);
    }
    function getStyle(node,style) {
        return node.currentStyle ? node.currentStyle[style] : getComputedStyle(node)[style];//获取样式做了浏览器兼容
    }
</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的多物体多方式运动------JavaScript学习之路18

文章目录JavaScript的多物体多方式运动条件效果完整源码JavaScript的多物体多方式运动条件每个物体有自己的周期函数和时间如果公用一个timer变量，会导致第二个事件影响第一个事件的运动，下图第一次第一个的运动长度，要大于第二次的第一个运动长度，因为第二次的时候点击速度比较快在第一个的运动还没有结束第二个物体就触发了，解决方法就是每个物体有自己的定时器timerlet timer = null;//公用一个timerds[0].onclick = function () {
复制链接

扫一扫