DOM的高级操作-一种JS控制元素的视觉假象

1、运动中的边界处理（让其在一个指定区域内运动）

当元素的offsetLeft值超出一定距离或达到一个我们想要设置的边界值时，停止计时器。

 var timer;
    timer = setInterval(function(){//计时器
        if(obox.offsetLeft>=200){//判断的条件
            clearInterval(timer);
        }else{[
            obox.style.left = obox.offsetLeft+10+"px";//每30毫秒我们走的步长
        }
    },30)//以毫秒为单位，设置多少毫秒计时器走一次。

　tip：为什么是30毫秒呢？

    因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅，如果计算机的性能不是很好，你写了30毫秒，DOM也不定能真的30毫秒执行一次。

2、重力回弹运动

加速效果：增加重力值，随着定时器的执行，重力增大

 

回弹效果：当抵达目标位置时，将速度改为负值

 

回弹减速：将速度改变为负值的同时，除以2减半

 

		var oball = document.getElementById("ball");
		var speed = 5;		//步长
		var g = 1;			//重力
		var index = 0;		//计时器的计数器
		var timer = null;	//计时器
		var maxTop = 300 - oball.offsetHeight;
		
		timer = setInterval(function(){
			index++;
			if(index%5 == 0){
				speed += g;
			}
			if(maxTop-oball.offsetTop 
     

　3、抛物线运动

                var oball = document.getElementById("ball");
		var speed = 5;		//Y轴步长
		var g = 1;			//Y轴的重力
		var index = 0;		//计时器的计数器
		var timer = null;	//计时器
		var maxTop = 300 - oball.offsetHeight;		//Y轴的最大值
		var left = 20;								//x轴的步长
		var maxLeft = 1000 - oball.offsetWidth;		//X轴的最大值
		
		timer = setInterval(function(){
			//计时器的计数器
			index++;
			//每五次增加重力
			if(index%5 == 0){
				speed += g;
			}
			//判断最后一步的距离，不足一步了，打车差点到终点的时候，下车结束行程
			if(maxTop-oball.offsetTop < speed){
				//让小球在Y轴回弹，同时每次回弹损耗0.3
				speed = -Math.round(speed*0.7);
				//强制到终点
				oball.style.top = maxTop + "px";
				//当速度不足1，清除没用的计时器
				if(Math.abs(speed) <= 1){
					clearInterval(timer);
				}
			}else{
				//正常设置运动元素的位置
				oball.style.left = oball.offsetLeft + left + "px";
				oball.style.top = oball.offsetTop + speed + "px";
			}
			//让小球在X轴的右边回弹
			if(maxLeft - oball.offsetLeft < left){
				left = -left;
			}
			//让小球在X轴的左边回弹
			if(oball.offsetLeft < 0){
				left = -left;
			}
		},30)
		
//		判断最后剩下的距离<步长的时候
//		停!
//		手动到终点
		//打车

4.透明度的变换

          其实就是获取样式的透明度，然后改变数值

		var obox = document.getElementById("box")
		var speed = 10;
		var iNow = 20;
		var timer = null;
		
		obox.onmouseover = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				if(iNow == 100){
					clearInterval(timer)
				}else{
					iNow += speed
					obox.style.opacity = iNow /100;
				}
			},30)
		}
		obox.onmouseout = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				if(iNow == 20){
					clearInterval(timer);
				}else{
					iNow -= speed
					obox.style.opacity = iNow /100;
				}
			},30)
		}

5、缓冲运动

		var oBtn = document.getElementById("btn");
		var oBox = document.getElementById("box");
		oBtn.onclick = function(){
			move(500);
		}
		var timer = null;
		function move(target){
			// 1. 关闭开启定时器;
			clearInterval(timer);
			timer = setInterval(function(){
				//2.计算速度;
				var speed = (target - oBox.offsetLeft) / 10;
				// if(speed > 0){
				// 	speed = Math.ceil(speed);
				// }else{
				// 	speed = Math.floor(speed);
				// }
				// 速度取整判断;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//三目运算，代码更简介、明朗。
				//console.log(speed,oBox.offsetLeft);	
				// 3. 终止运动;
				if(target == oBox.offsetLeft){
					clearInterval(timer);
				}else{
					oBox.style.left = oBox.offsetLeft + speed + "px";
				}
			}, 30);
		}

6、平时我们在页面上所看到的鼠标滑动实现悬浮的一个效果

css和html解构：


	

	

js解构：