asp.net點擊鼠標移動圖片

最新推荐文章于 2024-07-15 10:49:25 发布

jackeyabc

最新推荐文章于 2024-07-15 10:49:25 发布

阅读量739

点赞数

分类专栏： ASP.NET开发文章标签： asp.net function javascript null html

本文链接：https://blog.csdn.net/jackeyabc/article/details/2032088

版权

ASP.NET开发专栏收录该内容

79 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>Test</title>
<script language="javascript">
var ox,oy,ex,ey;
var stepx,stepy,TimeSpan=20;
var ts=null;
document.οnclick=Handler;
var MoveObj=null;
window.οnlοad=function()
{
MoveObj=document.getElementById("pic");
}
function Handler(e)
{
clearInterval(ts);//
e=e||event;
alert(e);
var pic=document.getElementById("pic");
ox=parseInt(pic.style.left);
oy=parseInt(pic.style.top);
ex=e.clientX;
ey=e.clientY;
if(ex>ox)
{
    stepx=1;
}
else
{
    stepx=-1;
}
stepy=(ey-oy)/(ex-ox);//根据比例算出y方向的移动速度
ts=setInterval("movePic()",TimeSpan);
}
function movePic()
{
   ox+=stepx;
   oy+=stepy;
   if(stepx>0)
   {
     if(ox<=ex)
       MoveObj.style.left=ox+"px";
     else
       MoveObj.style.left=ex+"px";
   }
   else
   {
     if(ox>=ex)
       MoveObj.style.left=ox+"px";
     else
       MoveObj.style.left=ex+"px";
   }
   if(stepy>0)
   {
     if(oy<=ey)
       MoveObj.style.top=oy+"px";
     else
       MoveObj.style.top=ey+"px";
   }
   else
   {
     if(oy>=ey)
       MoveObj.style.top=oy+"px";
     else
       MoveObj.style.top=ey+"px";
   }
   if(parseFloat(MoveObj.style.top)==parseInt(ey)&&parseFloat(MoveObj.style.left)==parseInt(ex))
     clearInterval(ts);
}
</script>
</head>
<body>
<img src="images/toqq.gif" id="pic" style='position:absolute;left:0px;top:0px;width:120px;height:100px'/>
</body>
</html>

jackeyabc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
asp.net點擊鼠標移動圖片

Test var ox,oy,ex,ey;var stepx,stepy,TimeSpan=20;var ts=null;document.onclick=Handler;var MoveObj=null;window.onload=function(){ MoveObj=document.getElementById("pic");}function Handler(e){ clearI
复制链接

扫一扫

专栏目录