js移动动画封装

最新推荐文章于 2023-02-02 14:44:52 发布

code~he

最新推荐文章于 2023-02-02 14:44:52 发布

阅读量164

点赞数

分类专栏： tools 文章标签：封装 javascript

本文链接：https://blog.csdn.net/qq_44421547/article/details/105642751

版权

tools 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

		function moveFont(textId,user_x,user_y,user_s,timer){
			//兼容性检测
			if(!document.getElementById) return false;
			if(!document.getElementById(textId)) return false;
			let p_font = document.getElementById(textId);
			//js防抖
			if(p_font.timers){
				clearTimeout(p_font.timers);
			}
			//查询计算样式
			function getStyle(elem,prop){
    			if( window.getComputedStyle ){
       				return window.getComputedStyle(elem,null)[prop];
    			}else{
       				return elem.currentStyle[prop];
    			}
			}
			//动画的实现
			if(!getStyle(p_font,'left') || !getStyle(p_font,'top')) return false;
			let	p_x = parseInt(getStyle(p_font,'left')),
				p_y = parseInt(getStyle(p_font,'top')),
				speed = 0
			if(p_x == user_x && p_y == user_y){
				return true;
			}
			if(p_x < user_x){
				speed = Math.floor((user_x-p_x)/user_s);
				p_x = p_x + speed;
			}
			if(p_x > user_x){
				speed = Math.floor((p_x-user_x)/user_s);
				p_x = p_x - speed;
			}
			if(p_y < user_y){
				speed = Math.floor((user_y-p_y)/user_s);
				p_y = p_y + speed;
			}
			if(p_y > user_y){
				speed = Math.floor((p_y-user_y)/user_s);
				p_y = p_y - speed;
			}
			p_font.style.left = p_x + 'px';
			p_font.style.top = p_y + 'px';
			let func = "moveFont('"+textId+"',"+user_x+","+user_y+","+user_s+","+timer+")";
			p_font.timers = setTimeout(func,timer);
		}