js运动应用

·  多个div变宽

	for(var i=0;i<aDiv.length;i++)
	{
		//定义一个div的属性timer定时器，这样每个定时器就是独立的，类似于定义index序号的思想
		aDiv[i].timer = null;
		aDiv[i].onmouseover = function()
		{
			startMove(this,500);
		};
		aDiv[i].onmouseout = function()
		{
			startMove(this,200);
		};
	}

·  多个div淡入淡出

window.onload = function ()
{
	var aDiv = document.getElementsByTagName('div');

	for(var i=0;i<aDiv.length;i++)
	{
		//多物体框架的所有东西不能公用，公用会出问题，所以定义一个div的属性alpha存放透明度
		aDiv[i].alpha = 30;
		aDiv[i].timer = null;
		aDiv[i].onmouseover = function ()
		{
			startMove (this,100);
		};
		aDiv[i].onmouseout = function ()
		{
			startMove (this,30)
		};
	}
};

function startMove (obj,iTarget)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		var speed = (iTarget-obj.alpha)/16
		speed = speed>0?Math.ceil(speed):Math.floor(speed);

		if(obj.alpha == iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.alpha+=speed;

			obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
			obj.style.opacity = obj.alpha/100;
		}
	},30);
};

·  变宽和变高，解决offsetWidth加入边框的BUG

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

	oDiv2.onmouseover = function ()
	{
		startMove(this,'width',600)
	};
	oDiv2.onmouseout = function ()
	{
		startMove(this,'width',200)
	};
	oDiv1.onmouseover = function ()
	{
		startMove(this,'height',600)
	};
	oDiv1.onmouseout = function ()
	{
		startMove(this,'height',200)
	};
};

//取非行间样式封装函数
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		//只兼容IE
		return obj.currentStyle[name];
	}
	else
	{
		//不兼容IE，其他的可以
		return getComputedStyle(obj,false)[name];
	}
};

//传入三个参数，实现一个运动框架操作多个div不同的属性
function startMove(obj,attr,iTarget)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		//简化代码，用变量存储取到的非行间样式，并且把他变成整数
		var cur = parseInt(getStyle(obj,attr));
		var speed = (iTarget-cur)/6;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);

		if (cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			obj.style[attr] = cur+speed+'px';
		}
	},30);
};

·  任意值得运动框架

window.οnlοad=function ()
{
	var oDiv1 = document.getElementById('div1');
	var oDiv2 = document.getElementById('div2');
	var oDiv3 = document.getElementById('div3'); 

	oDiv2.onmouseover = function ()
	{
		startMove(this,'width',600)
	};
	oDiv2.onmouseout = function ()
	{
		startMove(this,'width',200)
	};
	oDiv1.onmouseover = function ()
	{
		startMove(this,'height',600)
	};
	oDiv1.onmouseout = function ()
	{
		startMove(this,'height',200)
	};
	oDiv3.onmouseover = function ()
	{
		startMove(this,'opacity',100)
	};
	oDiv3.onmouseout = function ()
	{
		startMove(this,'opacity',30)
	};
};

//取非行间样式封装函数
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		//只兼容IE
		return obj.currentStyle[name];
	}
	else
	{
		//不兼容IE，其他的可以
		return getComputedStyle(obj,false)[name];
	}
};

//传入三个参数，实现一个运动框架操作多个div不同的属性
function startMove(obj,attr,iTarget)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		//简化代码，用变量存储取到的非行间样式，并且把他变成整数
		var cur = 0;
		if(attr=='opacity')
		{
			//对取出的opacity转化成小数然后乘以100然后四舍五入
			cur = Math.round(parseFloat(getStyle(obj,attr))*100);
		}
		else
		{
			cur =parseInt(getStyle(obj,attr));
		}

		var speed = (iTarget-cur)/6;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);

		if (cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			if(attr=='opacity')
			{
				//做浏览器兼容
				obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity = (cur+speed)/100;
			}
			else
			{
			obj.style[attr] = cur+speed+'px';
			}
		}
	},30);
};

·  仿FLASH的图片轮换播放器

外部封装任意值运动框架move.js

//取非行间样式封装函数
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		//只兼容IE
		return obj.currentStyle[name];
	}
	else
	{
		//不兼容IE，其他的可以
		return getComputedStyle(obj,false)[name];
	}
};

//传入三个参数，实现一个运动框架操作多个div不同的属性
function startMove(obj,attr,iTarget)
{
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
		
		//简化代码，用变量存储取到的非行间样式，并且把他变成整数
		var cur = 0;
		if(attr=='opacity')
		{
			//对取出的opacity转化成小数然后乘以100然后四舍五入
			cur = Math.round(parseFloat(getStyle(obj,attr))*100);
		}
		else
		{
			cur =parseInt(getStyle(obj,attr));
		}

		var speed = (iTarget-cur)/6;
		speed = speed>0?Math.ceil(speed):Math.floor(speed);

		if (cur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			if(attr=='opacity')
			{
				//做浏览器兼容
				obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity = (cur+speed)/100;
			}
			else
			{
			obj.style[attr] = cur+speed+'px';
			}
		}
	},30);
};

JS代码

<script src="move.js"></script>
<script>

//灵活查找className封装成函数
function getByClass(oParent,sClass)
{
	var aEle = oParent.getElementsByTagName('*');
	var aResult = [];
	for (var i=0;i<aEle.length;i++)
	{
		if(aEle[i].className==sClass)
		{
			aResult.push(aEle[i]);
		}
	}
	return aResult;
};

window.οnlοad=function ()
{
	var oDiv=document.getElementById('playimages');
	var oBtnPrev=getByClass(oDiv,'prev')[0];
	var oBtnNext=getByClass(oDiv,'next')[0];
	var MarkLeft=getByClass(oDiv,'mark_left')[0];
	var MarkRight=getByClass(oDiv,'mark_right')[0];

	var oDivSmall=getByClass(oDiv,'small_pic')[0];
	var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
	var aLiSmall=oDivSmall.getElementsByTagName('li');

	var oUlBig = getByClass(oDiv,'big_pic')[0];
	var aLiBig = oUlBig.getElementsByTagName('li');

	//定义当前大图的层级
	var nowZIndex=2;
	
	//定义当前
	var now=0;

	//小图的父亲ul的宽等于小图li的个数乘以任意一个小图li的宽
	oUlSmall.style.width = aLiSmall.length*aLiSmall[0].offsetWidth+'px';

	//左右按钮隐藏显示
	oBtnPrev.οnmοuseοver=MarkLeft.οnmοuseοver=function ()
	{
		startMove(oBtnPrev,'opacity',100)
	};
	oBtnPrev.οnmοuseοut=MarkLeft.οnmοuseοut=function ()
	{
		startMove(oBtnPrev,'opacity',0)
	};
	oBtnNext.οnmοuseοver=MarkRight.οnmοuseοver=function ()
	{
		startMove(oBtnNext,'opacity',100)
	};
	oBtnNext.οnmοuseοut=MarkRight.οnmοuseοut=function ()
	{
		startMove(oBtnNext,'opacity',0)
	};
	
	//大图切换
	for (var i=0;i<aLiSmall.length;i++)
	{
		//给小图定义序号方便选出来
		aLiSmall[i].index=i
		aLiSmall[i].οnclick=function ()
		{
			//如果当前的序号就是now，就不执行下面的语句，就不会点当前会有动画
			if(this.index==now)return;
			now = this.index;

			//调用切换函数
			tab();
		};
		
		//鼠标移入移出小图透明度改变
		aLiSmall[i].οnmοuseοver=function ()
		{
			startMove(this,'opacity',100);
		};
		aLiSmall[i].οnmοuseοut=function ()
		{
			//鼠标移出的时候如果移出的小图不等于now才执行透明度变成60
			if(this.index!=now)
			{
			startMove(this,'opacity',60);
			}
		};
	}

	//定义函数切换的功能
	function tab()
		{
			//点击小图之后对应的序号大图的层级等于当前层级加一，大图就会显示出来
			aLiBig[now].style.zIndex=nowZIndex++;

			//先把所有的小图都设置成透明度60，再把当前的小图透明度设置100
			for(var i=0;i<aLiSmall.length;i++)
			{
				startMove(aLiSmall[i],'opacity',60);
			}
			startMove(aLiSmall[now],'opacity',100);
			
			//先把大图的高变成0，再用定时器把他变成原来的高，实现动画效果
			aLiBig[now].style.height = 0;
			startMove(aLiBig[now],'height',320);

			//如果当前是小图第一个，让父亲ul的左边距等于0，这样前面就不会空一个li
			if(now==0)
			{
				startMove(oUlSmall,'left',0);
			}
			//如果当前是小图的最后一个，就和倒数第二个移动的left相同，这样ul位置就不会变，后面就不会空一个li
			else if(now==aLiSmall.length-1)
			{
				startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth)
			}
			//不是第一个也不是最后一个，左边距就移动(now-1)乘以小图的宽度
			else
			{
				startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth)
			}
		};
	
	//左右按钮点击切换
	oBtnPrev.οnclick=function ()
	{
		now--;
		if(now==-1)
		{
			now=aLiSmall.length-1;
		}
		//调用切换函数
		tab();
	};
	oBtnNext.οnclick=function ()
	{
		now++;
		if(now==aLiSmall.length)
		{
			now=0;
		}
		//调用切换的函数
		tab();
	};

	
	
	// 鼠标进入/移出 ，div自动停止/播放
	var timer = setInterval(oBtnNext.onclick,7000);
	oDiv.onmouseover = function ()
	{
		clearInterval(timer);
	};
	oDiv.onmouseout = function ()
	{
		timer = setInterval(oBtnNext.onclick,7000);
	};

};
</script>

笔记：

·多物体运动框架
1.多个div，鼠标移入变宽：
加入边框会出现BUG
(1).参数的传递：物体，目标 
(2).使用单个定时器会出现问题不能同时运动，使用div[i].index的序号思想，给每个div加一个定时器div[i].timer
2.多个div淡入淡出:
(1).多物体框架所有东西不能公用，公用一般会出问题，比如alpha存放透明度
(2).把alpha放进属性,div[i].alpha


·任意值运动框架
1.变宽变高
(1).offsetWidth的Bug：加入边框会出问题
currentStyle getComputedStyle 取非行间样式
(2).传三个参数，一个运动框架控制多个div（任意值的运动框架）
(3).Math.round（）四舍五入
(4).封装opacity小数的问题


·仿flash图片展示
(1)灵活查找className封装成函数
(2)大图层级问题定义nowZIndex
(3)定义当前的图片now
(4)函数封装，灵活的调用。