move.js（运动函数封装）

灰太狼 2022-05-23 01:41 197阅读 0赞

调用：startMove(obj,json,endFn);

参数说明：

obj:要运动的元素（必写）

json:是对象格式，对应为元素的属性和值（必写）

endFn:回调函数（可有可无）

例子：

document.onclick = function(){
      startMove(oDiv,{width:200,height:300});
    }

move.js代码

function startMove(obj,json,endFn){
    	
    		clearInterval(obj.timer);
    		
    		obj.timer = setInterval(function(){
    			
    			var bBtn = true;
    			
    			for(var attr in json){
    				
    				var iCur = 0;
    			
    				if(attr == 'opacity'){
    					if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
    					iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
    					
    					}
    					else{
    						iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
    					}	
    				}
    				else{
    					iCur = parseInt(getStyle(obj,attr)) || 0;
    				}
    				
    				var iSpeed = (json[attr] - iCur)/20;
    			iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    				if(iCur!=json[attr]){
    					bBtn = 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(bBtn){
    				clearInterval(obj.timer);
    				
    				if(endFn){
    					endFn.call(obj);
    				}
    			}
    			
    		},30);
    	
    	}
    	
    	
    	function getStyle(obj,attr){
    		if(obj.currentStyle){
    			return obj.currentStyle[attr];
    		}
    		else{
    			return getComputedStyle(obj,false)[attr];
    		}
    	}

发表评论取消回复

表情：

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

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

相关阅读

相关封装运动函数回掉函数

封装缓动动画回掉函数： <!DOCTYPE html> <html> <head> <title>封装运动函数回掉函数</title>

ゝ一纸荒年。/ 2023年07月05日 05:19/ 0 赞/ 17 阅读

相关封装函数insertAfter

Element.prototype.insertAfter = function(targetNode,afterNode){ var

淩亂°似流年/ 2022年12月07日 12:18/ 0 赞/ 156 阅读

相关运动函数

// 运动函数 var timer = null; function move(ele, attr, step, target) { /

古城微笑少年丶/ 2022年09月10日 06:27/ 0 赞/ 171 阅读

相关 Ajax工具函数封装

原生Ajax写法回顾 > 原生使用`Ajax`主要分为五步,需要手写较多内容,如果每次我们使用`Ajax`都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封

朴灿烈づ我的快乐病毒、/ 2022年07月12日 07:24/ 0 赞/ 168 阅读

相关 Ajax工具函数封装

原生Ajax写法回顾 > 原生使用`Ajax`主要分为五步,需要手写较多内容,如果每次我们使用`Ajax`都需要手写一遍,较为浪费时间,所以我们将公共代码抽取,封

骑猪看日落/ 2022年07月12日 07:24/ 0 赞/ 202 阅读

相关分享一些常用的定时器运动函数

//匀速运动的animate函数 function animate(tag, target) \{ clearInterval(tag.timer

以你之姓@/ 2022年06月18日 09:53/ 0 赞/ 199 阅读

相关二次封装函数

题目描述已知函数 fn 执行需要 3 个参数。请实现函数 partial，调用之后满足如下条件： 1、返回一个函数 result，该函数接受一个参数 2、执行

小鱼儿/ 2022年06月04日 05:56/ 0 赞/ 280 阅读

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

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

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

相关封装Promise构造函数

最新更新时间：2018年11月7日15:42:55 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：Promise对象封装原

约定不等于承诺〃/ 2022年04月18日 02:54/ 0 赞/ 262 阅读

相关 js的常用封装函数库之多个属性运动框架animate的封装

多个属性运动框架animate的封装函数： // 多个属性运动添加回调函数 function animate(obj,json,fn) { // 给谁

系统管理员/ 2022年01月27日 12:39/ 0 赞/ 292 阅读