zoukankan      html  css  js  c++  java
  • 运动函数move 各种各样的运动都可以做

     在这里我说的还是那种匀速运动,主要是通过改变一个盒模形的left值和top 值,来实现运动,或者,改变模形的自身的属性,来动起来:

    function getStyle(obj,name){
    	return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
    };
    
    function move(obj,json,options){
    	options=options||{};
    	options.time=options.time||700;
    
    	var start={};
    	var dis={};
    
    	for(var name in json){
    		if(name=='opacity'){
    			start[name]=parseFloat(getStyle(obj,name));
    		}else{
    			start[name]=parseInt(getStyle(obj,name));
    		};
    		dis[name]=json[name]-start[name];
    	};
    	var count=Math.round(options.time/30);
    	var n=0;
    
    	clearInterval(obj.timer);
    	obj.timer=setInterval(function(){
    		n++;
    
    		for(var name in json){
    			var cur=start[name]+dis[name]*n/count;
    
    			if(name=='opacity'){
    				obj.style.opacity=cur;
    				obj.style.filter='alpha(opacity:'+cur*100+')';
    			}else{
    				obj.style[name]=cur+'px';
    			}
    		}
    	},30);
    
    }
    

      

    getStyle这个函数是获取样式属性的,前面这块已经说过了;

    这里要说一下的是动运的公式:

    开始的距离+(终点距离-起点距离)*运动了几次/一共能运动多少次;

    开始的距离这里用start表示,终点距离用了一个json数据,json[name],就代表是终点距离,n 代表运动了几次,count 代表,30毫秒走一次,一规定的时间里走完这段距离的总次数。


    如果问题,欢迎大家及时指点,一同交流,共同提高
  • 相关阅读:
    webpack入坑之旅(五)加载vue单文件组件
    webpack入坑之旅(四)扬帆起航
    webpack入坑之旅(三)webpack.config入门
    webpack入坑之旅(二)loader入门
    模块的总结
    项目中的bug
    详解懒汉模式和饿汉模式以及他们的改进
    感悟(岁月)
    浅谈js中的this的用法
    图解http协议(一章了解web及其网络基础h)
  • 原文地址:https://www.cnblogs.com/wujidns/p/4127471.html
Copyright © 2011-2022 走看看