animation

		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);
		}	
		function linkImgShow(){
			if(!document.getElementsByTagName) return false;
			if(!document.getElementById) return false;
			if(!document.getElementById('list')) return false;
			if(!document.getElementById('move_img')) return false;
			let moveImg = document.getElementById('move_img'),
				list = document.getElementById('list'),
				a_list = list.getElementsByTagName('a');
			a_list[0].onmouseover = function(){
				moveFont('move_img',-100,0,10,10);
			}
			a_list[1].onmouseover = function(){
				moveFont('move_img',-200,0,10,10);
			}
			a_list[2].onmouseover = function(){
				moveFont('move_img',-300,0,10,10);
			}
		}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值