<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
div{
width:300px;
height:300px;
background:#F33;
filter: alpha(opacity:30);
margin:10px;
float:left;
opacity:0.3;
}
</style>
<script>
window.onload=function()
{
var oDiv=document.getElementsByTagName('div');//获得元素
for(var i=0;i<oDiv.length;i++)
{
oDiv[i].timer=null;
oDiv[i].alpha=30;
oDiv[i].onmouseover=function()
{
startMove(this,100);
}
oDiv[i].onmouseout=function()
{
startMove(this,30);
}
/*oDiv.onmouseover=function()//移入事件
{
startMove(100);
}
oDiv.onmouseout=function()//移出事件
{
startMove(30);
}*/
}
}
/*var alpha=30;
/*var timer=null;*/
function startMove(obj,iTarget){//定义函数
clearInterval(obj.timer); //清空事件以免重复触发
/* var oDiv=document.getElementById('div1');*///函数内获取元素
obj.timer=setInterval(function(){ //定义定时器
var speed=0; //定义速度属性
if(obj.alpha>iTarget) //判断当前的left值与目标值的关系
{
speed=-10; //大于目标值速度则是负值
}
else
{
speed=10; //否则速度则是正值
}
if(obj.alpha==iTarget) //等于目标值则停止运动
{
clearInterval(obj.timer) //清空定时器
}
else{
obj.alpha+=speed; //运动速度
obj.style.filter='alpha( opacity:'+obj.alpha+')' ;//IE透明度赋值
obj.style.opacity='obj.alpha/100'; //火狐透明度最终赋值
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消