JS移动元素的代码

//移动元素的函数

function move(ele,aim,step){
    //每次点击执行函数的时候都清除定时器,防止连续点击加快移动速度
    //之所以用ele.time是为了不出time  undefined的错误
    clearInterval(ele.time);

    ele.time=setInterval(function() {
        //获取当前位置 offsetLeft获得的是数字不带单位
        var now = ele.offsetLeft;

        //确定每次移动的单位距离step的正负,如果目标距离aim大于当前距离,step为正,反之step为负
        //每次执行函数之前将step初始化为正值
        step = Math.abs(step);
        step = now < aim ? step : -step;

        //设置每次执行函数当前得位置都在变化,变化量为step
        now += step;

        //设置元素的位置,如果正在向目标位置移动,那么Math.abs(now-aim)>Math.abs(step),如果已经在目标位置的地方
        //但是不能精确则Math.abs(now-aim)<Math.abs(step),这两种情况的当前位置是不一样的
        if (Math.abs(now - aim) > Math.abs(step)) {
            ele.style.left = now+'px';
        } else if (Math.abs(now - aim) < Math.abs(step)) {
            clearInterval(time);
            ele.style.left = aim+'px';
        }
        else if(Math.abs(now - aim) === Math.abs(step)){
            ele.style.left = aim+'px';
        }
    },20);


}

需要的时候只要先引用这个js,然后调用move函数就可以了。其中move函数的三个参数ele,aim,step分别是:要移动的元素、目标位置、每次移动的单位距离。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值