js实现图片在网页上自动上下左右移动(无bug)

萝卜头888

已于 2022-06-06 23:16:55 修改

阅读量6.6k

点赞数 5

分类专栏： html js 文章标签： html html5 css

于 2021-09-17 10:00:57 首次发布

本文链接：https://blog.csdn.net/wocao2dai/article/details/120341807

版权

js 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

首先，要缕一缕思路：

第一步，怎样实现图片自动移动；

第二步，怎么实现图片碰到浏览器边框后折返；

第三步，怎么实时获得浏览器边框的大小；

实现第一步与第二步：

var num=0;  //移动的距离，下一行同理；
var num1=0;
var flg=true;   //设置一个变量，配合三元表达式使用，实现折返的效果，下一行同理；
var flg1=true;
//判断让其上下移动
if(num<=0){flg=true;num=0}
if(num>=shang){flg=false;num=shang}
flg?num+=2:num-=2;
//判断让其左右移动
if(num1<=0){flg1=true;num1=0}
if(num1>=zuo){flg1=false;num1=zuo}
flg1?num1+=2:num1-=2;

实现第三步：

需要一个定时函数，就可以实时获取浏览器的宽度

setTimeout(fun,10)
     function fun(){
          zuo = document.documentElement.clientWidth-129;
          shang = document.documentElement.clientHeight-295;
          setTimeout(fun,10)
    }

下面的就是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        //这个很重要，去掉这个会出bug
        body{
            overflow: hidden;
        }
        img{
            width:129px;
            height:295px;
            /* position:absolute;
            top:0;
            left:0; */
        }
    </style>
</head>
<body>
    <img src="https://www.shijie.center/dong.gif" alt=""/>    
    <script>
        var img =document.querySelector('img');
        var num=0;  //移动的距离，下一行同理；
        var num1=0;
        var flg=true;   //设置一个变量，配合三元表达式使用，实现折返的效果，下一行同理；
        var flg1=true;
  
        (function fun(){
            zuo = document.documentElement.clientWidth-129;
            shang = document.documentElement.clientHeight-295;
            setTimeout(fun,10)
            //判断让其上下移动
            if(num<=0){flg=true;num=0}
            if(num>=shang){flg=false;num=shang}
            flg?num+=2:num-=2;
            //判断让其左右移动
            if(num1<=0){flg1=true;num1=0}
            if(num1>=zuo){flg1=false;num1=zuo}
            flg1?num1+=2:num1-=2;
            img.style.marginTop=num+'px';
            img.style.marginLeft=num1+'px';
        })()
    </script>
</body>
</html>

萝卜头888

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现图片在网页上自动上下左右移动(无bug)

首先，要缕一缕思路：第一步，怎样实现图片自动移动；第二步，怎么实现图片碰到浏览器边框后折返；第三步，怎么实时获得浏览器边框的大小；实现第一步与第二步：var num=0; //移动的距离，下一行同理；var num1=0;var flg=true; //设置一个变量，配合三元表达式使用，实现折返的效果，下一行同理；var flg1=true;//判断让其上下移动if(num<=0){flg=true;num=0}if(num>=shang){flg=f
复制链接

扫一扫