js完美运动框架————简易版

前端傻白

于 2021-10-28 17:46:27 发布

阅读量212

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/zy_1235/article/details/121017986

版权

这篇博客通过一个实例展示了如何使用HTML和JavaScript创建一个动态效果。当鼠标进入元素时，元素会平滑地改变宽度、高度和透明度；当鼠标离开时，元素恢复原状。文章重点在于JavaScript的运动框架函数`sport`，它用于实现平滑过渡效果。

摘要由CSDN通过智能技术生成

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="sport.js"></script>
    <script>
    //获取div
        const o_div = document.querySelector('#box');
        //给div添加移入事件
        o_div.onmouseenter = function(){
            sport_14(this,{width : 400},() =>{
                sport_14(this,{height : 400},() =>{
                    sport_14(this,{opacity : 30})
                })
            });
        }
        //给div添加移出事件
        o_div.onmouseleave = function(){
            sport_14(this,{width : 100},() =>{
                sport_14(this,{height : 100},() =>{
                    sport_14(this,{opacity : 100})
                })
            });
        }
    </script>
</body>
</html>

js部分

//获取非行内样式
function getStyle(obj,attr){ //attr (attrbute : 属性)
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//运动框架 ( 二、三、四)
function sport(obj,json,fn){
    // 1. 先停止上一次的计时器
    clearInterval(obj.timer);
    // 2. 开启新的计时器
    obj.timer = setInterval(() => {
        // 1. 设置开关
        let flag = true; //（都达到目标时）
        // 2. 遍历对象
        for(let attr in json){
            //1. 获取当前值
            let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
            //2. 计算速度
            let speed = (json[attr] - cur) / 8;
            //因为除法，产生小数，因为计算机无法正确处理小数的问题，所以我们对小数进行取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //3. 检测是否到达目标
            if(cur !== json[attr]){
                flag = false;
            }
            //4. 设置运动
            if(attr === 'opacity'){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
            }else{
                obj.style[attr] = cur + speed + 'px';
            }
        }
        // 3. 判断开关，停止计时器
        if(flag){
            //停止计时器
            clearInterval(obj.timer);
            //判断回调函数
            if(typeof fn === 'function'){
                fn();
            }
        }
    },30)
}