多物体,任意值运动框架

跟着视频学习些的运动框架,使用很简单,简单写一个使用的例子:

鼠标移入将透明度从60变成100,前提是css布局里面对象已经有opacity属性值

window.οnlοad=function()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{


aDiv[i].οnmοuseοver=function()
{
startMove(this,'opacity',100);
}
aDiv[i].οnmοuseοut=function()
{
startMove(this,'opacity',60);
}
}
}


框架本身的代码:

// JavaScript Document
/*
**
多物体,任意值运动框架
obj:要运动的对象    attr:需要改变的属性   iTarget:属性值需要到达的目标点
**
*/
/*获取元素属性值的函数*/
function getStyle(obj,attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj,false)[attr];
	}
}
function startMove(obj,attr,iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var iCur=0;
		if(attr=='opacity')
		{
		  iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
		}
		else
		{
		  iCur=parseInt(getStyle(obj,attr));
		}
		var iSpeed=(iTarget-iCur)/8;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		
		if(iCur==iTarget)
		{
			clearInterval(obj.timer);
		}
		else
		{
			if(attr=='opacity')
			{
			  obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
			  obj.style.opacity=(iCur+iSpeed)/100;
			}
			else
			{
			obj.style[attr]=iCur+iSpeed+'px';
			}
		}
		
		},30);
}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值