Javascript的offsetleft取值问题

最新推荐文章于 2023-09-02 17:56:14 发布

aoju63518515822

最新推荐文章于 2023-09-02 17:56:14 发布

阅读量223

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wxy2531/p/7078131.html

版权

<!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之后，不能判断清除定时器的条件，

转载于:https://www.cnblogs.com/wxy2531/p/7078131.html

aoju63518515822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript的offsetleft取值问题

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

扫一扫