Question

javascript让图片移动的函数

页面中有张图。margin left是0.
想用JS，一个按钮，点一下就开始实现每100毫秒向右移动10px，

Answer 1

/**
* 简单自定义动画函数
* @param {objec} obj 一个元素对象
* @param {string} pos 表示移动到的目标地点
* @param {number} speed 速度大小，表示每秒移动的像素数，默认为1px/100ms
* @param {function} callback 动画执行完后调用的函数
* @return {[object]} 元素自身，方便链式写法
*/
function ani(obj, pos, speed, callback) {
/* 清除无用的定时器 */
if (obj.move) {
clearTimeout(obj.move);
}

obj.style.position = "absolute";

var speed = speed || 10,
x = parseInt(obj.style.left) || 0,
y = parseInt(obj.style.top) || 0;
/* 初始化元素的相关属性值 */
if (!obj.x) {
obj.x = x;
obj.y = y;
obj.fx = x + pos[0];
obj.fy = y + pos[1];
}
/* 如果元素到达指定位置，则跳出并执行回调函数 */
if (x === (pos[0] + obj.x) && y === (pos[1] + obj.y)) {
if (typeof callback === "function") {
callback();
}
obj.x = null;
obj.y = null;
obj.fx = null;
obj.fy = null;
return obj;
}
/* 判断在水平方向上是应该往哪个方向移动 */
if (obj.x < obj.fx) {
if (x < obj.fx) {
obj.style.left = (x + speed) + "px";
}
} else {
if (x > obj.fx) {
obj.style.left = (x - speed) + "px";
}
}
/* 判断在垂直方向上是应该往哪个方向移动 */
if (obj.y < obj.fy) {
if (y < obj.fy) {
obj.style.top = (y + speed) + "px";
}
} else {
if (y > obj.fy) {
obj.style.top = (y - speed) + "px";
}
}

obj.move = setTimeout(function() {
ani(obj, pos, speed, callback);
}, 100);
}

window.onclick = function() {
ani($("#testAni")[0], [100, 0], 5, function() {
ani($("#testAni")[0], [-100, 0],null,function(){
alert("success")
});
})
}

可供参考

追问

大侠。您这个代码太先进了啊，已经超出我目前自学的范围了。
貌似简单的弄一个什么类似鱼posright-=10（貌似是这样的吧）；再写个时间100貌似就可以了，但是我不会写。请问你可以告诉我吗

Answer 2

　示例代码：　
　　<img src="*.jpg" id="tImg" style="position:absolute"/><input type="button" value="开始滚动" onclick="move()" />
　　<script>
　　//使图片运动的方法
　　function move(){
　　var imgLeft=img.offsetLeft;//取得图像当前的left值
　　var speed=10;
　　if(imgLeft<1000){
　　img.style.left+=speed+"px"; //操作img的style属性使之运动
　　setTimeout(move,50)//定时的调用当前这个方法
　　}

　　}

　　</script>

Answer 3

<img src="*.jpg" id="tImg" style="position:absolute"/><input type="button" value="开始滚动" onclick="move()" />
<script>
//使图片运动的方法
function move(){
var imgLeft=img.offsetLeft;//取得图像当前的left值
var speed=10;
if(imgLeft<1000){
img.style.left+=speed+"px"; //操作img的style属性使之运动
setTimeout(move,50)//定时的调用当前这个方法
}

}

</script>