<!DOCTYPE html><meta charset="utf-8"><head> <title></title> <style type="text/css"> #div1{width: 200px; height: 200px; background-color:red; filter: alpha(opacity:30); opacity: 0.3;} </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function() { startMove(100); } oDiv1.onmouseout = function() { startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget) { var oDiv1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function() { var speed = 0; if (alpha<iTarget) { speed = 10; } else { speed = -10; } if (alpha==iTarget) { clearInterval(timer); } else { alpha += speed; oDiv1.style.filter = 'alpha(opacity:'+alpha+')'; oDiv1.style.filter = alpha/100; } },30); } </script></head><body><div id="div1"></div></body></html>
添加回答
举报
0/150
提交
取消