js - 链式运动、左右轮播（完美运动框架）

不想掉头发的小猴子

于 2022-11-15 14:03:20 发布

阅读量171

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/weixin_57135131/article/details/127863390

版权

本文详细介绍了如何使用JavaScript构建一个完善的链式运动和左右轮播效果的框架。通过实例代码，深入探讨了核心的运动逻辑、事件处理和API设计，帮助开发者理解和实现此类前端交互功能。

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

//获取非行内样式的兼容
function getStyle(dom,attr){
    return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom)[attr];
}

//完美运动框架
function sport(dom,json,fn){
    //1. 停止计时器
    clearInterval(dom.timer);
    //2. 启动计时器
    dom.timer = setInterval(() => {
        //2.1 设置开关
        let falg = true;
        //2.2 遍历对象
        for(let attr in json){
            //2.2.1 获取当前值
            let  cur = null; 
            if(attr === 'opacity'){
                cur = Math.floor(parseFloat(getStyle(dom,attr)) * 100)
            }else{
                cur = parseInt(getStyle(dom,attr));
            }
            //2.2.2 计算速度
            let speed = (json[attr] - cur) / 8;
            //小数问题
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //2.2.3 检测是否达标
            if(cur !== json[attr]){
                falg = false;
            }
            //2.2.4设置运动
            if(attr === 'opacity'){
                dom.style.opacity = (cur + speed) / 100;
                dom.style.filter = `alpha(opacity=${cur + speed})`
            }else{
                dom.style[attr] = cur + speed + 'px';
            }