js代码问题(实现onmouseover改变透明度)

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>测试</title>
       <style type="text/css">
           div {
               width: 200px;
               height: 80px;
               background-color: red;
               margin: 10px 0px;
               opacity: 0.5;
           }
       </style>
   </head>

   <body>
       <div id="div1">这是div</div>
       <script type="text/javascript">
           var div = document.querySelector('#div1')
           div.onmousemove = function() {
               startMove(this, 1)
           }

           function startMove(obj, iTarget) {
               //              console.log('start')
               clearInterval(obj.timer)
               console.log(obj.style.opacity)
               obj.timer = setInterval( function() {
                   var currentVal = getComputedStyle(obj).opacity
                       //console.log(currentVal)
                   var speed = (iTarget - currentVal) / 10
                       //console.log('!!!!!!!!!!!!!!!!!!!'+obj.style.opacity)
                   if(iTarget != currentVal) {
                       obj.style.opacity = currentVal + speed
                           //console.log('这里'+speed)
                           //console.log(obj.style['opacity'] )
                   } else {
                       clearInterval(obj.timer)
                   }
               }, 50)
           }

           console.dir(div.style)
       </script>
   </body>

</html>

我想实现,div的onmouseover来改变div的透明度;不知道哪里出错了;求指教

Codeplayer

浏览 1715回答 2

js代码问题(实现onmouseover改变透明度)

2回答