首页 > 代码库 > div简单水平移动效果
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简单水平移动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。