Javascript的offsetleft取值问题

本文转载自查看原文 2017-06-25 21:49 1299

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big {
            width: 800px;
            height: 100px;
            border: 1px solid #000;
            position: absolute;
            left: 100px;
            top: 100px;
            /*margin: 50px auto;*/
        }

        .box {
            position: absolute;
            top: 0;
            left:0;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 -1px;
        }
    </style>
</head>
<body>

<button>向右移动2个盒子距离</button>
<button>向左移动2个盒子距离</button>
<div class="big">
    <div class="box"></div>
</div>

<script>
    var btnArr = document.querySelectorAll('button');
    var big = document.getElementsByClassName('big')[0];
    var box = document.querySelector('.box');
    var width = box.offsetWidth;
    console.log(width);

    var count=0;

    btnArr[0].onclick = function () {
//        alert();
        count++;
        animate(box,-count*width);
    }

    btnArr[1].onclick = function () {
        count--;
        animate(box,-count*width);
    }

    //缓动框架封转
    function animate(ele,target) {
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            var step = (target-ele.offsetLeft)/10;
            step=step>0?Math.ceil(step):Math.floor(step);
            ele.style.left = ele.offsetLeft + step +'px';
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
                ele.style.language = target+'px';
                clearInterval(ele.timer);
            }
            console.log(1);
        },31);
    }
</script>
</body>
</html>


这样给要移动的元素加上margin之后，不能判断清除定时器的条件，

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 offsetleft、offsetTop、offsetParent的兼容性问题关于js中的offsetLeft和offsetTop属性和css中translate的问题 JavaScript经典代码【一】【javascript HTML控件获取值】解决jquery下checked取值问题... for 循环中的 i 变量取值问题关于的radio和CheckBox属性获取值问题 document.getElementByName() 获取值得问题解决vue的{__ob__: observer}取值问题解决vue的{__ob__: observer}取值问题 offsetLeft,clientX ,offsetX 定义和区别