這樣不行...哪錯了？
body,#div1{
margin:0px;
padding:0px;
}
#div1{
width:200px;
height:200px;
background:red;
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById('div1');
div.onmouseover= function(){
var timer = setInterval(function(){
clearInterval(timer);
div.style.opacity += 0.1;
if(div.style.opacity == 1){?
clearInterval(timer);
}
},30)
}
div.onmouseout= function(){
var timer = setInterval(function(){
clearInterval(timer);
div.style.opacity-=0.1;
if(div.style.opacity == 0.3){
clearInterval(timer);
}
},30)
}
}
2015-11-05
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>Title</title> ????<style> ?????body,#div1{ ?????????margin:0px; ?????????padding:0px; ????} ?????#div1{ ?????????width:200px; ?????????height:200px; ?????????background:red; ?????} ?</style> </head> <body> <div?id="div1"?style="opacity:?0.3"></div> <script?type="text/javascript"> window.onload?=?function()?{ ?????var?div?=?document.getElementById('div1'); ?????var?timmer,timmer2; ?????div.onmouseover?=?function?()?{ ?????????timer?=?setInterval(function?()?{ ?????????????if?(div.style.opacity?==?1)?{ ?????????????????clearInterval(timer); ?????????????????return; ??????????????} ?????????????div.style.opacity?=?(div.style.opacity*10+1)/10; ??????????},?30) ????} ?????div.onmouseout?=?function?()?{ ?????????timer2?=?setInterval(function?()?{ ?????????????if?(div.style.opacity?==?0.3)?{ ?????????????????clearInterval(timer2); ?????????????????return; ?????????????} ?????????????div.style.opacity?=?(div.style.opacity*10-1)/10; ????????},?30) ????} } </script> </body> </html>不知道這是不是你想要的效果。