Ice丶M 2015-01-01 10:39 采纳率: 100%
浏览 3028
已采纳

想让一个图片在窗口里弹动，碰到页面边框则反弹。

我想让一个图片或者是广告之类的，在我页面一开始加载时就从某一个点开始动，最好是从左上角一直往下走，碰到页面边框则反弹，以此类推。
求解！！！！ 谢谢。

  • 写回答

1条回答

  • Go 旅城通票 2015-01-01 11:25
    关注

    DEMO

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    <html>  
    <head>  
    <title>图片浮动</title>  
    <style>  
#img{  
       position:absolute;  
     }  
    </style>  
    </head>  
    <body>  
    <img src="http://avatar.csdn.net/8/A/6/2_oyljerry.jpg" width=50 height=50 id="img">  

    <script>  
    //获取图片的对象  
      var img=document.getElementById("img");  
    //设置图片的起始点坐标  
      var x=0,y=0;  
    //设置图片的行进速度  
      var xSpeed=10;  //横坐标的行进速度  
      var ySpeed=10;  //纵坐标的行进速度  
    //设置图片的最大移动范围  
      var w=Math.max(document.documentElement.clientWidth,document.body.clientWidth)-50;    //横向移动的最大范围  
      var h=Math.max(document.documentElement.clientHeight,document.body.clientHeight)-50;   //纵向移动的最大范围  
      window.onresize=function(){
         w=Math.max(document.documentElement.clientWidth,document.body.clientWidth)-50;    //横向移动的最大范围  
         h=Math.max(document.documentElement.clientHeight,document.body.clientHeight)-50;   //纵向移动的最大范围  
      }
      function floatimg(){  
        //判断图片是否达到了边界  
       //1、如果达到了,那我们就改变图片的方向
       //2、如果没有达到，设置坐标值为  起始坐标+速度 
       if(x>w||x<0){x=x<0?0:w;xSpeed=-xSpeed;}else x+=xSpeed;
       if(y>h||y<0){y=y<0?0:h;ySpeed=-ySpeed;}else y+=ySpeed;      
      //使图片按规定坐标移动  
      img.style.left=x+"px";  
      img.style.top=y+"px";  
      //设置图片移动的时间间隔  
      setTimeout(floatimg,50);  
     }  
     floatimg();  
    </script>  
    </body>    
    </html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办
  • ¥15 vue2登录调用后端接口如何实现