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

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>

  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面是一个完整的JS原生实现穿梭框能够左右来回穿梭无bug的代码: HTML部分: ``` <div> <select id="left" multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <button id="leftToRight">></button> <button id="rightToLeft"><</button> <select id="right" multiple> </select> </div> ``` JS部分: ``` var leftSelect = document.getElementById("left"); var rightSelect = document.getElementById("right"); var leftToRightBtn = document.getElementById("leftToRight"); var rightToLeftBtn = document.getElementById("rightToLeft"); leftToRightBtn.addEventListener("click", function() { for (var i = 0; i < leftSelect.options.length; i++) { var option = leftSelect.options[i]; if (option.selected) { rightSelect.appendChild(option); i--; } } }); rightToLeftBtn.addEventListener("click", function() { for (var i = 0; i < rightSelect.options.length; i++) { var option = rightSelect.options[i]; if (option.selected) { leftSelect.appendChild(option); i--; } } }); ``` 这段代码实现了将左侧的选项移动到右侧或者将右侧的选项移回到左侧。其中,左右两个select元素都设置了multiple属性,表示可以多选。通过循环遍历左侧和右侧的选项,判断是否被选中,从而实现移动。由于在移动过程中会改变options的长度,因此需要在移动完成后将变量i减1,以防止漏掉某些选项。这样就可以实现一个简单的穿梭框了,而且没有bug

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萝卜头888

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值