zoukankan      html  css  js  c++  java
  • animate

    function animate(args){
    	//保存运动对象
    	this.animateTarget=args.obj;
    	//保存运动的属性
    	this.animateProperty=args.property;
    	//保存速度
    	this.animaterSpeed=args.speed||6;
    	//保存回调函数
    	this.callBack=args.callBack||false;
    	//初始化动画
    	this.initAnimate();
    };
    animate.prototype={
    	initAnimate:function(){
    		var _this=this,speed;
    		window.clearInterval(this.animateTarget.timer);
    		this.animateTarget.timer=window.setInterval(function(){
    			var isClear=true;
    			for(var prop in _this.animateProperty){
    				speed=(_this.animateProperty[prop]-_this.getCurrentStyleValue(prop))/(10-_this.animaterSpeed);
    				speed=speed>0?Math.ceil(speed):Math.floor(speed);
    				if(_this.getCurrentStyleValue(prop)!=_this.animateProperty[prop]){
    					isClear=false;
    				};
    				if(Math.abs(_this.getCurrentStyleValue(prop)-_this.animateProperty[prop])<=_this.animaterSpeed){
    					_this.animateTarget.style[prop]=_this.animateProperty[prop]+"px";
    				}else{
    					_this.animateTarget.style[prop]=_this.getCurrentStyleValue(prop)+speed+"px";
    				};
    			};
    			if(isClear){
    				window.clearInterval(_this.animateTarget.timer);
    				if(_this.callBack){_this.callBack.call(_this.animateTarget)};
    			};
    		},13);
    	},
    	//获取当前属性的属性值
    	getCurrentStyleValue:function(property){
    		var result;
    		if(window.getComputedStyle){
    			result=window.getComputedStyle(this.animateTarget,null)[property];
    		}else{
    			result=this.animateTarget.currentStyle[property];
    		};
    		return parseInt(result);
    	}
    };
    

      

    	boxs[i].onclick=function(){
    		new animate({
    					obj:this,
    					property:{
    							marginLeft:400,
    							height:100
    							},
    					speed:3,
    					callBack:function(){
    						//alert(this);
    					}
    				});
    	}
    

      

  • 相关阅读:
    MySQL锁的调试
    MySQL的分支与变种
    leetcode Merge Two Sorted Lists
    leetcode Next Permutation
    leetcode n后问题
    leetcode Remove Duplicates from Sorted List I && II
    leetcode minimum path sum
    leetcode simplify path
    leetcode ip地址组合
    leetcode path sum II
  • 原文地址:https://www.cnblogs.com/yangliulang/p/3313938.html
Copyright © 2011-2022 走看看