JS运动之多物体运动淡入淡出

最新推荐文章于 2022-07-12 13:11:05 发布

曲奇小姐

最新推荐文章于 2022-07-12 13:11:05 发布

阅读量216

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/81053338

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS运动之多物体运动淡入淡出:要点：当涉及多物体的运动时，最好不要有公共使用的变量，避免造成混乱，可以将这些变量设置成属性与运动物体绑定，比如速度，透明度等</title>
    <style>
    div{
      width: 300px;
      height: 200px;
      background-color: red;
      margin-left: 30px;
      float:left;
      filter: alpha(opacity:30);
      opacity:0.3;
       /* 规定透明度：0.0完全透明，1完全不透明 */
    }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
   <script type="text/javascript">
   //var alpha=30;
   //运动框架
   function startMove(obj,iTarget){
     clearInterval(obj.timer);   //关闭定时器
     obj.timer=setInterval(function(){
       var speed=(iTarget-obj.alpha)/6;
       speed=speed>0?Math.ceil(speed):Math.floor(speed); //缓冲运动
       if(obj.alpha==iTarget){
         clearInterval(obj.timer);
       }
       else{
         obj.alpha=obj.alpha+speed;
         obj.style.filter='alpha(opacity:'+obj.alpha+')';
         obj.style.opacity=obj.alpha/100;
       }
     },30)
   };

   var aDiv=document.getElementsByTagName('div');
   for(var i=0;i<aDiv.length;i++){
     aDiv[i].timer=null;
     aDiv[i].alpha=30;

     aDiv[i].οnmοuseοver=function(){
       startMove(this,100);
     };
     aDiv[i].οnmοuseοut=function(){
       startMove(this,30);
     };
   }
   </script>
</html>