这段js代码为什么会一直抖动

window.onload = function(){
    var returnHome = document.getElementById('return-home');
    var returnLeft = document.getElementById('return-home-left');
    var returnRight = document.getElementById('return-home-right');
    returnRight.onclick = function(){
        startMove(0,10);
    };
    returnLeft.onclick = function(){
        startMove(-250,-10);
    };
    var timer = null;
    function startMove(a,b){
        var returnHome = document.getElementById('return-home');
        setInterval(function(){
            if(returnHome.offsetLeft === a){
                clearInterval(null);
            }else{
                returnHome.style.left = returnHome.offsetLeft + b +"px";
            }
        },30);
    }
};

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>返回首页</title>
        <link href="./return-home.css" rel="stylesheet"> <!-- /css样式表 -->

        <link href="./icomoon-common/style.css" rel="stylesheet"> <!-- /图标字体 -->
    </head>

    <body>
        <!-- 整个ul丢进去 -->
        <ul id="return-home">
            <li class="left sidebar" id="return-home-left">
                <a href="javascript:;">
                    <span></span> 关
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span> 首页
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span> 首页
                </a>
            </li>
            <li>
                <a href="#">
                    <span class=" icon-play"></span> 首页
                </a>''
            </li>
            <li>
                <a href="#">
                    <span></span> 首页
                </a>
            </li>
            <li class="right sidebar" id="return-home-right">
                <a href="javascript:;">
                    <span></span> 开
                </a>
            </li>
        </ul>
        <script src="./return-home.js"></script> <!-- /整段js代码  -->

    </body>

</html>

@charset 'UTF-8';

.return-home
{
    font-size: 0;

    position: fixed;
    z-index: 999999;
    bottom: 5%;
    /*left: calc(100% / 6 - 100%);*/
    left: -250px;

    display: inline-block;
    overflow: hidden;

    width: 300px;
    height: 50px;
    margin: 0;
    padding: 0;

    opacity: .7;
    border: 0;
    background-color: white;
}
.return-home li
{
    font-size: 0;

    display: inline-block;

    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0;

    list-style: none;

    border: 0;
}
.return-home .sidebar
{
    background-color: transparent;
}
.return-home .sidebar a
{
    color: #666;
}
.return-home li a
{
    font-size: 14px;

    display: inline-block;

    width: 100%;
    height: 100%;

    text-align: center;
}

.return-home li a span
{
    font-size: 24px;

    display: inline-block;

    width: 100%;
    margin-top: 5px;
}

madnesslin

浏览 1702回答 2

2回答

stone310

有几个地方要注意和修改的：1、startMove(0,10)，表达的意思是以10px的速度到达left为0的位置如果你body初始margin（好像是8）没有去掉（我看你CSS代码上面没有），那么你用offsetLeft初始位置就是8，你以每次10px的速度永远到不了offsetLeft=0这个位置2、if(returnHome.offsetLeft === a){ clearInterval(null); }这个动画停不了，给setInterval起个名字，然后再把null换掉3、function startMove(a,b)函数一开始要放置一个clearInterval，否则多次点击计时器会叠加（点一下左点一下右就在那乱抖）

qq_昼绽_0

图标字体的没给，

随时随地看视频慕课网APP