用JS完成图片在窗体中的弹碰效果

最新推荐文章于 2023-07-12 20:45:22 发布

bandenger

最新推荐文章于 2023-07-12 20:45:22 发布

阅读量678

点赞数 2

分类专栏： JS基础

本文链接：https://blog.csdn.net/bandenger/article/details/80466145

版权

JS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、由于是动态效果这里就不展示效果图了，先来简介编程思路：

1、图片需要移动

移动方式：将图片设置为绝对定位，通过改变绝对定位的位置来达到图片移动的效果（当然，这只是一种思路，读者可自行选择其它方式）

移动方法：需要使用setInterval（）;；间隔计时器来控制速度和移动效果

2、碰撞

需要获取自身电脑的屏幕宽度，碰撞其实就是边界的检测，如果检测到在边界则改变移动方向，

3、图片的移动方向

图片移动只有八个方向：左上（左移、右移）、左下（左移、右移）、右上（左移、右移），右下（左移、右移）

二、代码展示：（代码中添加了鼠标事件，当鼠标移到图片时，会停止移动，移开会继续移动）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            position: absolute;
            top:300px;
            left:300px;
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
<img src="1.jpg" alt="" id="img1"/>
</body>
<script>
    //获取图片节点、由于图片没法代码一起上传，如果读者想要看到效果，必须自己添加图片
    var img2=document.getElementById("img1");
    //获取屏幕可利用宽度
    var sWidth=window.screen.availWidth;
    //获取屏幕可利用高度
    var sHeight=window.screen.availHeight;
    //每次移动距离
    var left=10;
    console.log(sWidth-100);
    //true代表的是右方向，false代表的是左方向，默认为右
    var direction=1;
    //间隔时间为50ms调用一次move方法
    var time=setInterval(move,50);
    //添加鼠标事件,鼠标移开，继续使用间隔计时器
    img2.οnmοuseοut=function(){
     fun2()
    };
    //鼠标移入，取消间隔计时器
    img2.οnmοuseοver=function(){
     fun1();
    };
   function fun1(){
       clearInterval(time);
   }
    function fun2(){
        time=setInterval(move,50);
    }
    //移动的方法
    function move(){
        //使用最终样式获取当前绝对定位left数值，需要转int类型
        var x=parseInt(document.defaultView.getComputedStyle(img2,null).left);
        //使用最终样式获取当前绝对定位top数值，需要转int类型
        var y=parseInt(document.defaultView.getComputedStyle(img2,null).top);
        //移动方向左上、左下、右上、右下
        judgeBorder(x,y);
          switch(direction){
              case 1:
                  x+=left;
                  y-=left;
                  break;
              case 2:
                  x+=left;
                  y+=left;
                  break;
              case 3:
                  x-=left;
                  y+=left;
                  break;
              case 4:
                  x-=left;
                  y-=left;
                  break;
          }
        //设置图片绝对定位位置
        img2.style.left=x+"px";
        img2.style.top=y+"px";

    }
    //边界判断
    function judgeBorder(objX,objY){
       if(objY<0&&direction==1||objX<0&&direction==3){
            direction=2;
        }
        if(objX>(sWidth-100)&&direction==2||objY<0&&direction==4){
            direction=3;
        }
        if(objX>(sWidth-100)&&direction==1||objY>(sHeight-200)&&direction==3){
            direction=4;
        }
        if(objY>(sHeight-200)&&direction==2||objX<0&&direction==4){
            direction=1;
        }


    }
</script>
</html>

bandenger

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JS完成图片在窗体中的弹碰效果

一、由于是动态效果这里就不展示效果图了，先来简介编程思路：1、图片需要移动移动方式：将图片设置为绝对定位，通过改变绝对定位的位置来达到图片移动的效果（当然，这只是一种思路，读者可自行选择其它方式）移动方法：需要使用setInterval（）;；间隔计时器来控制速度和移动效果2、碰撞需要获取自身电脑的屏幕宽度，碰撞其实就是边界的检测，如果检测到在边界则改变移动方向，3、图片的移动方向图片移动只有八个...
复制链接

扫一扫