?<style type="text/css">
??????? * {
??????????? margin: 0px;
??????????? padding: 0px;
??????? }

??????? div {
??????????? position: relative;
??????????? width: 200px;
??????????? height: 200px;
??????????? background-color: red;
??????????? filter: alpha(opacity:30);
??????????? opacity: 0.3;
??????????? margin: 0 auto;
??????? }

??????? /*span {
??????????? position: absolute;
??????????? width: 20px;
??????????? height: 50px;
??????????? background-color: blue;
??????????? left: 200px;
??????????? top: 75px;
??????????? font-weight: bold;
??????????? cursor: pointer;
??????? }*/
??? </style>

??? <script>
??????? window.onload = function () {
??????????? var odiv = document.getElementById('div1');
??????????? odiv.onmouseover = function () {
??????????????? startMove(100);
??????????? }

??????????? odiv.onmouseout = function () {
??????????????? startMove(30);
??????????? }
??????? }
??????? var timer = null;
??????? var alpha = 30;
??????? function startMove(iTarget) {
??????????? clearInterval(timer);
??????????? timer = setInterval(function () {
??????????????? var odiv = document.getElementById('div1');
??????????????? var speed = 0;
??????????????? if (alpha > iTarget) {
??????????????????? speed = -10;
??????????????? } else {
??????????????????? speed = 10;
??????????????? }

??????????????? if (alpha == iTarget) {
??????????????????? clearInterval(timer);
??????????????? }
??????????????? else {
??????????????????? alpha += speed;
??????????????????? odiv.style.opacity = alpha / 100;
??????????????? }

??????????? }, 30);
??????? }

??? </script>