关于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>