- <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 eventevent=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 speedspeedNum=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属性
- mxmx=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";
- mxmx=mx-m;
- }
- //由于网页上top属性改变量小于1的时候,按1改变,所以计算出当移动量大于1时才改变top属性
- mymy=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";
- mymy=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>
http://blog.csdn.net/lip009/archive/2007/11/15/1887357.aspx