首页 > 移动平台 > 详细

div简单水平移动效果

时间:2014-09-27 15:55:01      阅读:311      评论:0      收藏:0      [点我收藏+]

  将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‘单位。

div简单水平移动效果

原文:http://www.cnblogs.com/heyuheitong/p/3996411.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!