JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度

来源：互联网发布：台湾文献数据库编辑：程序博客网时间：2024/05/19 16:36
<!doctype html><html><head><meta charset="utf-8"><title>JavaScript 高级课程之缓冲+多个DIV运动框架实现透明度</title><style>div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004;  }</style><script>window.onload = function(){var aDiv = document.getElementsByTagName('div');aDiv[0].Timer = null;aDiv[0].onmouseover = function(){startMove(this,'width',1000);}aDiv[0].onmouseout = function(){startMove(this,'width',100);}aDiv[1].Timer = null;aDiv[1].onmouseover = function(){startMove(this,'opacity',30);}aDiv[1].onmouseout = function(){startMove(this,'opacity',100);}aDiv[2].Timer = null;aDiv[2].onmouseover = function(){startMove(this,'height',300);}aDiv[2].onmouseout = function(){startMove(this,'height',100);}aDiv[3].Timer = null;aDiv[3].onmouseover = function(){startMove(this,'fontSize',100);}aDiv[3].onmouseout = function(){startMove(this,'fontSize',16);}}function startMove(obj, iT, value){clearInterval(obj.Timer);obj.Timer = setInterval(function(){var iCur = 0;if(iT == 'opacity'){iCur = parseFloat(getStyle(obj,iT))*100;}else{iCur = parseInt(getStyle(obj,iT));}var iSeppd = (value - iCur)/8;iSeppd = iSeppd>0?Math.ceil(iSeppd):Math.floor(iSeppd);if(iCur == value){clearInterval(obj.Timer);//清除100数字setTimeout(function(){obj.innerHTML = '';},2000);}else{if(iT == 'opacity'){obj.style.filter = 'alpha(opacity:'+ (iCur+iSeppd) +')';obj.style.opacity = (iCur+iSeppd)/100;obj.innerHTML = iCur + iSeppd;}else{obj.style[iT] = iCur + iSeppd + 'px';}}},20);}function getStyle(obj, attr){    if(obj.currentStyle){        return obj.currentStyle[attr];    }else{        return getComputedStyle(obj,false)[attr];    }}</script></head><body><div></div>    <div></div>    <div></div>    <div style=" font-size:">123</div></body></html>
0 0