js运动基础

·  运动基础

	//定义一个空的timer下面用来存放定时器
	var timer=null;
	
	function startMove()
	{
		var oDiv = document.getElementById('div1');

		//一开始先关掉定时器，保证只有一个定时器在运行，解决重复点击速度加快问题（多个定时器共同运行）
		clearInterval(timer);
		timer = setInterval(function(){
				var speed = 7;
				
				//解决不会停止问题，大于等于300就关闭定时器
				//加上“>”号解决速度取某些值会无法停止问题
				if(oDiv.offsetLeft >= 300)
				{
					clearInterval(timer);
				}
				//将运动语句放在else里面解决到达位置再点击还会运动问题
				else
				{
				oDiv.style.left = oDiv.offsetLeft+speed+'px';
				}
			},30)
	};

·  （侧边栏）分享到

window.οnlοad=function()
{
	var oDiv = document.getElementById('div1');

	oDiv.οnmοuseοver=function()
	{
		startMove(0);
	}
	oDiv.οnmοuseοut=function()
	{
		startMove(-150);
	}		
};

var timer=null;

//定义一个参数目标位置iTarget，简化代码
function startMove(iTarget)
{
	var oDiv = document.getElementById('div1');
	
	clearInterval(timer);
	timer = setInterval(function (){
		/*var speed = 0;

		//如果div的位置大于目标位置，速度是负值，向左走，否则向右走
		if(oDiv.offsetLeft > iTarget)
		{
			speed=-5;
		}
		else
		{
			speed=5;
		}*/

		//修改之后的版本，用缓冲运动
		var speed = (iTarget-oDiv.offsetLeft)/10
		speed = speed>0?Math.ceil(speed):Math.floor(speed)
		
		//如果div的位置达到目标位置，停止定时器
		if (oDiv.offsetLeft==iTarget) 
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.left = oDiv.offsetLeft+speed+'px';
		}
	},30)
};

·  淡入淡出

window.οnlοad=function()
{
	var oDiv = document.getElementById('div1');

	oDiv.onmouseover = function()
	{
		startMove(100)
	};
	oDiv.onmouseout = function()
	{
		startMove(30)
	};
};

//定义一个变量alpha存放透明度
var alpha = 30;
var timer = null;
function startMove(iTarget)
{	
	var oDiv = document.getElementById('div1');

	clearInterval(timer);
	timer = setInterval(function(){
		var speed = 0;
		//如果透明度大于目标的时候，变小，如果透明度小于目标，变大
		if(alpha>iTarget)
		{
			speed = -5;
		}
		else
		{
			speed = 5;
		}

		//透明度等于目标的时候关闭定时器
		if (alpha == iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			alpha+=speed;

			//把变量的数据传给透明度
			oDiv.style.filter='alpha(opacity:'+alpha+')';
			oDiv.style.opacity=alpha/100;
		}
	},30);
};

·  缓冲运动

	var timer = null;
	function startMove()
	{	
		clearInterval(timer);
		var oDiv = document.getElementById('div1');

		timer = setInterval(function (){
			
			//速度的定义实现缓冲功能 ，速度越来越小
			var speed = (300-oDiv.offsetLeft)/15;
			
			//三目运算符，如果speed>0向上取整，否则向下取整，不取整会到不了目标位置
			speed = speed>0?Math.ceil(speed):Math.floor(speed);

			oDiv.style.left = oDiv.offsetLeft+speed+'px';

		},30);
	};

· 右侧中间悬浮框

window.οnscrοll=function()
{
	var oDiv=document.getElementById('div1');

	//让div跟着屏幕走
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

	//div的上边距等于页面可视的高减去div的高，再除以2，就是右侧中间
	//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
	startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop))
};

var timer = null;
function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');

	clearInterval(timer);
	timer = setInterval(function(){
		var speed = (iTarget-oDiv.offsetTop)/4
		speed=speed>0?Math.ceil(speed):Math.floor(speed);

		if(oDiv.offsetTop==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.top=oDiv.offsetTop+speed+'px';
		}
	},30);
};

·  匀速运动停止

var timer=null;
function startMove(iTarget)
{
	var oDiv = document.getElementById('div1');

	clearInterval(timer);
	timer = setInterval(function(){
		var speed = 0 ;
		//对速度进行判断实现不管div在左边右边都可以到目标
		speed=iTarget>oDiv.offsetLeft?7:-7;

		//如果目标减去div的位置的绝对值小于速度，就关掉定时器，并且直接让左边距直接等于目标位置，如果不这样做，因为7不能整除，div就会在目标位置左右一直晃
		if(Math.abs(iTarget - oDiv.offsetLeft)<=7)
		{
			clearInterval(timer);
			oDiv.style.left = iTarget+'px';
		}
		else
		{
			oDiv.style.left = oDiv.offsetLeft+speed+'px';
		}
	},30);
};

笔记：

JS运动基础


·运动基础
让div动起来，定时器的使用 
运动中的Bug：不会停止、速度取某些值会无法停止、到达位置后再点击还会运动、重复点击速度加快


例子：分享到侧边栏、淡入淡出
调整透明度 ：低级浏览器兼容：filter:alph(opacity:30);高级浏览器兼容：opacity:0.3; 
简化代码参数的运用、使用变量存放数据


·缓冲运动：
向上取整: Math.ceil（） 例： Math.ceil(3.01) -> 4
向下取整：Math.floor() 
三目运算符的使用
右侧悬浮框：
document.documentElement.clientHeight 页面可视区


·匀速运动的停止条件
绝对值：Math.abs()的使用