Question

我的javascript代码有问题，我用javascript（不是CSS3）在页面中移动div，它包含一些滞后！我该怎么办才能摆脱这种滞后？（使用CSS3我将没有滞后但我想使用JAVASCRIPT）：|提前谢谢你。

我的JAVASCRIPT：

var margin_left_ltr = -1366;
var margin_left_rtl = 1366;

var margin_left_controler = 2.75;
function go_next(){
    var coming = setInterval(function come(){
        var firstDiv = document.getElementById('first_ltr');
        var thirdDiv = document.getElementById('third_ltr');
        var secondDiv = document.getElementById('second_rtl');

        firstDiv.style.marginLeft = margin_left_ltr + margin_left_controler + 'px';
        thirdDiv.style.marginLeft = margin_left_ltr + margin_left_controler + 'px';
        secondDiv.style.marginLeft = margin_left_rtl + (-margin_left_controler) + 'px';

        if((parseInt(window.getComputedStyle(firstDiv).marginLeft)) >= 0){
            clearInterval(coming);  
        }   
        margin_left_controler += 2.80;
    },10)

}

我的HTML：

<div class="click" onClick="go_next();">
        click here!   
</div>

<div id="container_about_us">

    <div id="first_ltr">

        <div id="exit" onClick="go_out();">
            X
        </div>

    </div>

    <div id="second_rtl">

    </div>

    <div id="third_ltr">

    </div>

</div>

Answer 1

您可以使用jQuery轻松完成此操作。通过增加它的边际使用来移动div：

function go_next(){
    var firstDiv=$('#first_ltr'),
        secondDiv=$('#second_ltr'),
        thirdDiv=$('#third_ltr');

    //Rest of your code.To move with margins :

    firstDiv.animate({"margin-left":"+= 2.75px"},1000);
    secondDiv.animate({"margin-left":"+= 2.75px"},1000);
    thirdDiv.animate({"margin-left":"+= 2.75px"},1000);
}

像CSS3一样用JAVASCRIPT移动div没有滞后

1 个答案: