<!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>
沒有報錯但是鼠標移入移出沒有效果
qq_杺難幵_03727737
2018-03-01 08:03:53