div简单水平移动效果

　　将img放置在div中，通过移动div达到移动img的效果，下面是水平移动。

　　html文件：

<div style="float:left; width:1000px">
    <div style="position:absolute; left:10px; float:left; width:250px" id="fIdiv">
        <img id="firstImg" src="images/sjz1.JPG" />
    </div>
    <div style="position:absolute; left:220px; float:left; width:250px" id="sIdiv">
        <img id="secondImg" src="images/sjz2.jpg" />
    </div>
</div>

　　js文件：

var i=10;
function transferImages(){
    var first = document.getElementById("fIdiv");
    var second = document.getElementById("sIdiv");
    first.style.position='absolute';
    second.style.position='absolute';
    
    var timer = setInterval(
        function(){
            if(first.style.left=='440px')
                clearInterval(timer);
        i = i+10;
        first.style.left = i+'px';
        second.style.left = (i+209)+'px';
        },60);    
}

　　js文件中timer是setInterval()返回值，用于作为clearInterval()的参数，来结束循环调用，setInterval()中的function()是循环的语句。

　　div的left值在正常赋值是：

<div style="position:absolute; left:10px"></div>

　　因此在重新赋值的时候加上'px'单位。

转载于:https://www.cnblogs.com/heyuheitong/p/3996411.html