window.onload=function(){ var oDiv = document.getElementById('div1');//获取div的DOM对象 oDiv.onmouseover = function() //鼠标移入方法 { startMove(100); }; oDiv.onmouseout = function() //鼠标移出方法 { startMove(30); };}var timer = null;//时间对象var alpha = 30;//透明度初始值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+')'; //设置IE透明度 oDiv.style.opacity = alpha / 100; //设置其他浏览器 } },30);}
window的onload函数指定了在页面加载的时候需要执行的方法,document.getElementById实现通过元素的id得到元素对象,然后通过得到对象的onmouseover绑定了鼠标移到指定层上面时对应需要执行的函数,该实例执行startMove(100),鼠标移出层通过onmouseout绑定对应的执行函数,该实例执行startMove(30)。
startMove函数实现的功能是将指定元素的透明度设置为传入参数iTarget,范围需要在0-255之间,并使用setInterval启动了一个定时器实现动画效果。
联系客服