zoukankan      html  css  js  c++  java
  • JS完美运动框架

    大家好 我是过往云烟  这几天写了一个 JS运动框架,基本上和JQ封装好的动画方法类似  可以改变透明度  高度宽度  字体大小 等等 很多值,原生态JS写的  而且还支持回调函数,可谓是功能应有尽有啊
    下面是框架的源码

    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 iSpeed=(json[attr]-iCur)/8;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
               
                //3.检测停止
                if(iCur!=json[attr])
                {
                    bStop=false;
                }
               
                if(attr=='opacity')
                {
                    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                    obj.style.opacity=(iCur+iSpeed)/100;
                }
                else
                {
                   
                    obj.style[attr]=iCur+iSpeed+'px';
                }
            }
           
            if(bStop)
            {
                clearInterval(obj.timer);
               
                if(fn)
                {
                    fn();
                }
            }
        }, 30)
    }
    




    调用的话   就直接把这2个函数放到一个JS文件里面   第一个函数是获取样式的 第二个函数是运动框架本身    获取样式 是JSON格式  比如要改变一个DIV的宽度  可以这样写
    startMove('div',{100});
    如果改变多个值可以这样
    startMove('div',{100,height:200});
    同时还支持链式运动 
    startMove(div,{100,height:100},function(){
      startMove(div,{opacity:20});
    });
    这样就可以 先改变高度宽度 然后在改变透明度

  • 相关阅读:
    Pagodas
    Bazinga
    取石子问题
    Sudoku Killer(hdu 1426 数独)
    欧拉函数
    CCPC Ancient Go
    ZZNU 1992: 情人节的尴尬
    fzu Problem 2128 最长子串(KMP + strstr 经典好题)
    POJ
    HDU
  • 原文地址:https://www.cnblogs.com/gwyy/p/2560272.html
Copyright © 2011-2022 走看看