<
body
onclick
="moveImg(event);"
>
< div style ="position:absolute;left:0px;top:0px;" id ="img" >< img src ="img.gif" ></ div >
</ body >
< script > ...
var img=document.getElementById("img");
var time=5;//时间,单位毫秒
var speed=2;//(speed/time)速度,单位象素,起点到终点的直线速度
var moveObj=null;
function moveImg(event)...{
var event=event||window.event;
if(moveObj!=null)...{
window.clearInterval(moveObj);
moveObj=null;
}
var imgX=parseInt(img.style.left);
var imgY=parseInt(img.style.top);
var moveX=event.clientX;
var moveY=event.clientY;
var x=moveX-imgX;
var y=moveY-imgY;
//计算速度基数
var speedNum=speed/Math.sqrt(x*x+y*y);
//计算X轴速度
var speedX=speedNum*x;
//计算Y轴速度
var speedY=speedNum*y;
//alert(speedX+":"+speedY);
//移动图片
moveObj=window.setInterval(function()...{moveImage(speedX,speedY,moveX,moveY);},time);
}
var mx=0;my=0;
function moveImage(x,y,endX,endY)...{
//由于网页上left属性改变量小于1的时候,按1改变,所以计算出当移动量大于1时才改变left属性
mx=mx+x;
var m=Math.floor(mx);
if(m<0)...{
m++;
}
if(m>=1 || m<=-1)...{
img.style.left=(parseInt(img.style.left)+m)+"px";
mx=mx-m;
}
//由于网页上top属性改变量小于1的时候,按1改变,所以计算出当移动量大于1时才改变top属性
my=my+y;
var n=Math.floor(my);
if(n<0)...{
n++;
}
if(n>=1 || n<=-1)...{
img.style.top=(parseInt(img.style.top)+n)+"px";
my=my-n;
}
//当移动到指定位置时停止移动
var xflag=false;
var yflag=false;
if(x>=0)...{
if(parseInt(img.style.left)>=endX)...{
xflag=true;
}
}else...{
if(parseInt(img.style.left)<=endX)...{
xflag=true;
}
}
if(y>=0)...{
if(parseInt(img.style.top)>=endY)...{
yflag=true;
}
}else...{
if(parseInt(img.style.top)<=endY)...{
yflag=true;
}
}
if(xflag && yflag)...{
window.clearInterval(moveObj);
moveObj=null;
}
}
</ script >
< div style ="position:absolute;left:0px;top:0px;" id ="img" >< img src ="img.gif" ></ div >
</ body >
< script > ...
var img=document.getElementById("img");
var time=5;//时间,单位毫秒
var speed=2;//(speed/time)速度,单位象素,起点到终点的直线速度
var moveObj=null;
function moveImg(event)...{
var event=event||window.event;
if(moveObj!=null)...{
window.clearInterval(moveObj);
moveObj=null;
}
var imgX=parseInt(img.style.left);
var imgY=parseInt(img.style.top);
var moveX=event.clientX;
var moveY=event.clientY;
var x=moveX-imgX;
var y=moveY-imgY;
//计算速度基数
var speedNum=speed/Math.sqrt(x*x+y*y);
//计算X轴速度
var speedX=speedNum*x;
//计算Y轴速度
var speedY=speedNum*y;
//alert(speedX+":"+speedY);
//移动图片
moveObj=window.setInterval(function()...{moveImage(speedX,speedY,moveX,moveY);},time);
}
var mx=0;my=0;
function moveImage(x,y,endX,endY)...{
//由于网页上left属性改变量小于1的时候,按1改变,所以计算出当移动量大于1时才改变left属性
mx=mx+x;
var m=Math.floor(mx);
if(m<0)...{
m++;
}
if(m>=1 || m<=-1)...{
img.style.left=(parseInt(img.style.left)+m)+"px";
mx=mx-m;
}
//由于网页上top属性改变量小于1的时候,按1改变,所以计算出当移动量大于1时才改变top属性
my=my+y;
var n=Math.floor(my);
if(n<0)...{
n++;
}
if(n>=1 || n<=-1)...{
img.style.top=(parseInt(img.style.top)+n)+"px";
my=my-n;
}
//当移动到指定位置时停止移动
var xflag=false;
var yflag=false;
if(x>=0)...{
if(parseInt(img.style.left)>=endX)...{
xflag=true;
}
}else...{
if(parseInt(img.style.left)<=endX)...{
xflag=true;
}
}
if(y>=0)...{
if(parseInt(img.style.top)>=endY)...{
yflag=true;
}
}else...{
if(parseInt(img.style.top)<=endY)...{
yflag=true;
}
}
if(xflag && yflag)...{
window.clearInterval(moveObj);
moveObj=null;
}
}
</ script >