js运动框架

风有多温柔.

于 2021-04-26 12:41:20 发布

阅读量333

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55788590/article/details/116150639

版权

在这里插入图片描述
上图就是调用移动框架的运行效果，代码和注释都在下面，小伙伴直接copy便可使用啦。

<!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: 100px;
            background-color: teal;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
<script>
    var div = document.querySelector("div")//获取元素节点

    function startMove(dom,attrObj,callback){
    //接收三个参数，dom是元素节点，attrObj是一个对象，存放要改变的属性和对应的数值，callback可填回掉或不填
        clearInterval(dom.timer)
        //每次调用此框架先清除定时器，避免多个定时器混乱
        var iSpeed = null;
        //定义步长，每次定时器执行时，元素样式改变的数值
        var iCur = null;
        //用来获取当前元素的最终样式
        dom.timer = setInterval(function(){
        //定义一个定时器，取名为dom.timer，在timer前加dom时为了区别不同的样式改变调用不同的定时器，避免多个同时调用混乱
            var bStop = true;
            //这里的bStop用的是开关思想，当iCur的数值等于我们想要的数值时，就会判断停止定时器
            for(var attr in attrObj){
            //for...in...循环遍历attrObj对象中的每一项
                if(attr == "opacity"){
                /*这里要判断attrObj中的属性名是不是opacity的原因在于opacity的属性值是个单纯的0~1之间的纯数字，没有单位，
                所以不能与width和height放在一起修改属性值 */
                    iCur = parseFloat(getStyle(dom,attr)) * 100
                    // 将元素的当前opacity强转为float，在*100是为便于iSpeed值的改变
                }else{
                    iCur = parseFloat(getStyle(dom,attr))
                    // 将元素的当前attr的属性值强转为float，可以直接去掉“px”，只保留数字
                }
                iSpeed = (attrObj[attr] - iCur) / 7 //这里的iSpeed不是固定的，做的是一个变速运动，attrObj[attr]是需要的样式，iCur是当前样式
                // 定义步长的大小，也就是定时器每运行一次，attr样式增加或减少的数值，
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)
                // iSpeed的值是不断减小的，当iSpeed的值大于零时，要像上取整，如0.2取整为1，小于零时相反
                if(attr == "opacity"){//分情况判断，opacity是个特殊情况
                    dom.style.opacity = (iCur + iSpeed) / 100 
                    //改变opacity的是属性值，除以100是因为上面*100
                }else{
                    dom.style[attr] = iCur + iSpeed + "px"
                    // 改变其他属性的属性值，记得要加上“px”单位
                }
                if(iCur != attrObj[attr]){
                    bStop = false   // 开关思想，当ICur即元素的当前样式没有达到我们想要的最终样式时，bStop为false，继续执行定时器
                }
            }
            if(bStop){
                clearInterval(dom.timer) // 当iCur到达我们想要的样式时，上面的if判断进不去，此时bStop为true，便可进入此if判断，从而清除定时器
                typeof callback == "function" && callback()
                // 判断callback参数接收的是不是一个函数
            }
        },30)
    }
    function getStyle(dom,attr){
    // 定义getStyle函数，获取元素的当前样式
        if(window.getComputedStyle){
        // if和else两个判断为兼容性写法
            return window.getComputedStyle(dom)[attr]
        }else{
            return dom.currentStyle[attr]
        }
    }
    div.onmouseenter = function(){
    // 定义一个鼠标事件移入事件
        startMove(div,{width:800,height:600},function(){
        // 调用移动框架，传入要改变的元素节点-div，传入要改变的元素属性及属性值
            console.log(12);
        })
    }
    div.onmouseleave = function(){
        startMove(div,{width:50})
    }

风有多温柔.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js运动框架

上图就是调用移动框架的运行效果，代码和注释都在下面，小伙伴直接copy便可使用啦。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .
复制链接

扫一扫