為什么我的沒有任何效果呢。。
<!DOCTYPE html>
<html>
<head>
<title>多物體透明度</title>
<style type="text/css">
div{
background-color:yellow;
height:200px;
width:200px;
margin:20px;
float:left;
opacity:0.3;
filter:alpha(opacity:0.3);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var oDIV=document.getElementsByTagName('div');
for (var i = 0; i < oDIV.length; i++) {
oDIV[i].alpha=30;
oDIV[i].onmouseover=function(){
onMove(this,100);
}
oDIV[i].onmouseover=function(){
onMove(this,30);
}
}
}
function onMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=0;
speed=(iTarget-obj.alpha)/10;
if (obj.alpha==iTarget) {
clearInterval(obj.timer);
}
else{
obj.alpha+=obj.speed;
? ? ? ? ? ? ? ? obj.style.opacity=obj.alpha/100;
? ? ? ? ? ? ? ? obj.style.filter="alpha(opacity:"+obj.alpha+")";
}
},30)
}
</script>
</body>
</html>
2015-12-09
<!DOCTYPE?html> <html> <head> ????<title>多物體透明度</title> ????<style?type="text/css"> ????????div{ ????????????background-color:yellow; ????????????height:200px; ????????????width:200px; ????????????margin:20px; ????????????float:left; ????????????opacity:0.3; ????????????filter:alpha(opacity:0.3); ????????} ????</style> </head> <body> <div></div> <div></div> <div></div> <div></div> <script?type="text/javascript"> ????window.onload=function(){ ????????var?oDIV=document.getElementsByTagName('div'); ????????for?(var?i?=?0;?i?<?oDIV.length;?i++)?{ ????????????oDIV[i].alpha=30; ????????????oDIV[i].onmouseout=function(){ ????????????????onMove(this,100); ????????????} ????????????oDIV[i].onmouseover=function(){ ????????????????onMove(this,30); ????????????} ????????} ????} ????function?onMove(obj,iTarget){ ????????clearInterval(obj.timer); ????????obj.timer=setInterval(function(){ ????????????var?speed=0; ????????????speed=(iTarget-obj.alpha)/10; ????????????if?(obj.alpha==iTarget)?{ ????????????????clearInterval(obj.timer); ????????????} ????????????else{ ????????????????obj.alpha+=speed; ????????????????obj.style.opacity=obj.alpha/100; ????????????????obj.style.filter="alpha(opacity:"+obj.alpha+")"; ????????????} ????????},30) ????} </script> </body> </html>你兩個事件都寫成?onmouseover ??
obj.alpha+=speed; ? 這一行是speed，不是obj.speed
2015-12-29
for (var i = 0; i < oDIV.length; i++) {
oDIV[i].alpha=30;
oDIV[i].onmouseover=function(){
onMove(this,100);
}
oDIV[i].onmouseover=function(){
上面最后一行應(yīng)該為oDIV[i].onmouseout=function(){else{
obj.alpha+=obj.speed;
上面最后一行應(yīng)該為：obj.alpha+=speed;