JS运动框架-move3.js

落日映苍穹つ 2022-07-14 11:18 147阅读 0赞

/**
     * Created by zhanghaibin on 16/12/5.
     */
    //完美运动框架
    function getStyle(obj,attr) {
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    };
    function startMove(obj,json,fn) {
        clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var bStop=true; //这一次运动就结束了---所有的值都到达了
            for(var attr in json){
                //1.取当前值
                var iCur=0;
                if(attr=='opacity'){
                    iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
                }else{
                    iCur=parseInt(getStyle(obj,attr));
                }
                //2.算速度
                var speed=(json[attr]-iCur)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                //3.检测停止
                if(iCur!=json[attr]){
                    bStop=false;
                }
                if(attr=='opacity'){
                    obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
                    obj.style.opacity=(iCur+speed)/100;
                }else{
                    obj.style[attr]=iCur+speed+'px';
                }
            }
            if(bStop){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                };
            }
        },30)
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 js运动技术--完美运动框架

运用JSON传递参数： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淡淡的烟草味﹌/ 2024年02月17日 23:20/ 0 赞/ 93 阅读

相关 js运动技术--链式运动框架

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。 <!DOCTYPE html> <html> <head>

你的名字/ 2024年02月17日 23:20/ 0 赞/ 70 阅读

相关 js运动技术--缓冲运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

￡神魔★判官ぃ/ 2024年02月17日 23:11/ 0 赞/ 60 阅读

相关 js运动技术

1、“分享栏”： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

一时失言乱红尘/ 2024年02月17日 23:10/ 0 赞/ 59 阅读

相关 JS之运动框架

一、匀速运动框架 1.设置元素为绝对定位，left、top才有效 <style> div1{width:100px;height:200px;b

朴灿烈づ我的快乐病毒、/ 2022年08月22日 00:02/ 0 赞/ 171 阅读

相关 JS运动基础框架

JS运动基础框架 1 注意：在开始运动时关闭已有的定时器 2 注意：把运动和停止隔开 <!DOCTYPE html> <html>

你的名字/ 2022年08月07日 02:49/ 0 赞/ 194 阅读

相关 JS运动框架-move3.js

/ Created by zhanghaibin on 16/12/5. / //完美运动框架 function getStyle

落日映苍穹つ/ 2022年07月14日 11:18/ 0 赞/ 148 阅读

相关 js 缓冲运动效果

缓冲需要用到数值取整，向上取整:Math.ceil() 向下取整Math.floor() 移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数

灰太狼/ 2022年06月13日 22:45/ 0 赞/ 185 阅读

相关 move.js（运动函数封装）

调用：startMove(obj,json,endFn); 参数说明： obj:要运动的元素（必写） json:是对象格式，对应为元素的属性和值（必写） endFn:回

灰太狼/ 2022年05月23日 01:41/ 0 赞/ 197 阅读

相关 js运动框架

参照网上写了一个运动框架支持对象的width,height,left,top...，透明度动画效果 // 对一个对象的多个属性实现动画 functio

╰半橙微兮°/ 2021年12月24日 06:55/ 0 赞/ 280 阅读