怎么用javascript实现图片移动？我只要一张图片向左移动一小段距离就好。

Answer 1

创建个DIV，把图片当里面，比如这样<div><img href = "asd"></div>然后在DIV属性里加上position : absolute，具体是这样<div style = "position:absolute"><div>

你要是前面都用HTML做了那直接var pic = getElementById("你的DIV的ID号，要自己先前写好")
或者var pic = getElementsByTagName("div")[你的页面里图片在第N个DIV里就写N-1]

然后调用setInterval
setInterval( " pic.style.left -= 3", 300);//每300毫秒 执行pic.style.left -= 3 一次
想停掉它调用clearInterval();
只想移动一次这样：setTimeout( " pic.style.left -= 3", 300);

全JS表示
var createDiv = document.createElement("div");
createDiv.style.height = "111px";
createDiv.style.width = "111px";
document.body.appendChild(createDiv);
createDiv.style.position = "absolute";
createDiv.style.overflow = "visible";//这里看你具体需要吧
createDiv.style.top = "111px";
createDiv.style.left = "111px";

var createImg = document.createElement("img");
createImg.setAttribute("src","https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif");
createImg.height = 111;
createImg.width = 111;
createDiv.appendChild(createImg);

setInterval( " createDiv.style.left -= 3", 300);

追问

pic.style.left -= 3
会移动多少？

追答

一次3个像素
最后那句setInterval( " createDiv.style.left -= 3", 300); 改下
var left = parseInt( createDiv.style.left);
setInterval( " left -= 3; createDiv.style.left = String(left)+'px'", 300);

不测试真容易出问题>_<

追问

那我想让图片飘一定距离后停止 要怎么做呢？

追答

var ctr1 = setInterval( " left -= 3; createDiv.style.left = String(left)+'px'; parseInt(createDiv.style.left)> XXX? 1 : clearInterval( ctr1)", 300); XXX自己填
要么不用setInterval用这种结构
function func1()
{
if ( parseInt( createDiv.style.left) > XXX)
{
left -= 3;
createDiv.style.left = String(left)+'px';
setTimeout( "func1()", 300);
}
}
func1();