利用js实现的气球飘升小例子

最新推荐文章于 2022-08-20 21:05:38 发布

hsze

最新推荐文章于 2022-08-20 21:05:38 发布

阅读量402

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_37937326/article/details/106388729

版权

利用js实现的小案例。以下是代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    padding: 0;
    margin: 0;
   }
   .im{
    width: 120px;
    height: 120px;
    /*position: absolute;*/
    border: 0px red solid;
    position: absolute;
   }
   .im1{
    width: 120px;
    height: 120px;
    
   }
  </style>
  <script>
   window.onload=function(){
    var oImg=document.getElementsByClassName('im');
    
    oImg[0].style.top=document.documentElement.clientHeight-120+"px";
    
    for(var i=1;i<oImg.length;i++){
     oImg[i].style.top=document.documentElement.clientHeight-120+"px";
     oImg[i].style.left=document.documentElement.clientWidth-i*120*2+"px";
    }
    //alert(oImg[1]);
    function move(time,obj,speed){
     //alert(time+"出发");
     time = setInterval(function(){
      if(parseInt(obj.style.top)<-120){
       //alert("注意我小于0了");
       obj.style.top=document.documentElement.clientHeight-120+"px";
       //clearInterval(time);
      }else{
       
       obj.style.top=obj.offsetTop-speed+"px";
      }
      
     },20);
    }
    for(var i=0;i<oImg.length;i++){
     var speed = Math.floor(Math.random()*10);
     while(speed==0){
      var speed = Math.floor(Math.random()*10);
     }
     move('time'+i,oImg[i],speed);
    }
   }
  </script>
 </head>
 <body>
  <div class="im" style="">
  <img  class="im1" src="img/qiqiu.jpeg"></div>
  <div class="im">
  <img  class="im1" src="img/qiqiu (1).jpeg"></div>
  <div class="im">
  <img src="img/1.jpeg" class="im1" /> 
  </div>
  <div class="im">
  <img src="img/2.jpeg" class="im1" /> 
  </div>
  <div class="im">
  <img src="img/3.jpeg" class="im1" /> 
  </div>
  <div class="im">
  <img src="img/4.jpeg" class="im1" /> 
  </div>
 </body>
</html>