码迷,mamicode.com
首页 > 移动开发 > 详细

div简单水平移动效果

时间:2014-09-27 18:10:30      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   文件   sp   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‘单位。

div简单水平移动效果

标签:style   blog   color   io   os   ar   文件   sp   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!