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

    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)
    }


    /*
    调用
    window.onload=function(){
        var oDiv=document.getElementByIdx_x('div1');
        oDiv.onmouseover=function(){
            startMove(oDiv, { 102, height: 200, opacity: 100});
        }
        oDiv.onmouseout=function(){
            startMove(oDiv, { 100, height: 100, opacity: 30});
        }    
    };
     */

  • 相关阅读:
    [转]CSS实现三角形的方法
    border:none 与border:0的区别
    jQuery选择器总结
    [转]利用CSS、JavaScript及Ajax实现图片预加载的三大方法
    [转]Javascript实现图片的预加载的完整实现
    [转]Javascript实现图片的预加载
    [转]资源预加载
    [转]css,javascript的预加载
    [转]预加载资源研究
    [转]移动WEB开发常用技巧
  • 原文地址:https://www.cnblogs.com/qibingshen/p/5257506.html
Copyright © 2011-2022 走看看