继续为大家分享一下自己的js小插件,方便大家学习交流

关于js运动特效,是大家一直都在苦苦专研一个有趣而又头疼的问题,尤其对于初学者而言!虽然各种插件和JQ为我们提供许多特效,但是原生js我们千万不能忘记!

以下是本人在学习专研期间写的一个动画插件,希望能帮助大家拓展一下思维,当然也可以直接使用:

1.弹性运动:

<script>
//弹性运动:obj:运动对象,target:移动的目标点,attr:left或者top,posiDis:当前所在的位置offsetLeft或offsetTop;
function flexMove(obj,target,attr,posiDis){
				var flag = 0;
				var speed = 0;
				clearInterval(obj.timer);
				var begain = obj[posiDis];
				obj.timer = setInterval(function(){
					//模拟加速减速
					speed +=(target - obj[posiDis])/5;
					//模拟摩擦力
					speed *= 0.7;
					flag +=speed;
					
					if (Math.abs(flag-target) <1 && Math.abs(speed<1)) {
						//速度和距离目标点偏差过小同时满足,清空定时器
						clearInterval(obj.timer);
						obj.style[attr] = target + 'px';//为了防止像素偏差一点,最后定位到目标位置
					} 
					else{
						obj.style[attr] = begain + flag + 'px';
					}
				},30)	
		}
</script>
2.碰撞运动

<script>
//弹性运动:obj:运动对象,target:移动的目标点,attr:left或者top,posiDis:当前所在的位置offsetLeft或offsetTop;
function flexMove(obj,target,attr,posiDis){
				var flag = 0;
				var speed = 0;
				clearInterval(obj.timer);
				var begain = obj[posiDis];
				obj.timer = setInterval(function(){
					//模拟加速减速
					speed +=(target - obj[posiDis])/5;
					//模拟摩擦力
					speed *= 0.7;
					flag +=speed;
					
					if (Math.abs(flag-target) <1 && Math.abs(speed<1)) {
						//速度和距离目标点偏差过小同时满足,清空定时器
						clearInterval(obj.timer);
						obj.style[attr] = target + 'px';//为了防止像素偏差一点,最后定位到目标位置
					} 
					else{
						obj.style[attr] = begain + flag + 'px';
					}
				},30)	
		}
</script>





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值