IE中实现图片的拖拽

最新推荐文章于 2022-11-04 09:51:34 发布

yxtyxt3311

最新推荐文章于 2022-11-04 09:51:34 发布

阅读量702

点赞数

分类专栏： JAVASCRIPT HTML 文章标签： ie image javascript html function div

JAVASCRIPT 同时被 2 个专栏收录

22 篇文章

订阅专栏

HTML

22 篇文章

订阅专栏

本文提供了一个使用HTML和JavaScript实现的简单示例，展示了如何通过鼠标拖动来改变网页中图片的位置。该示例包括两幅图片，通过mousemove事件调整其在页面上的坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <script language="javascript">
     function moveImage(){
       if(window.event.button!=1){
         return;
       }
       with(window.event.srcElement.style){
         //重新设置图像在浏览器中的位置
         pixelLeft=window.event.x-236/2-document.all.ImageDiv.offsetLeft;
         pixelTop=window.event.y-118/2-document.all.ImageDiv.offsetTop;
       }
       window.event.returnValue=false;//取消系统拖动事件
     }
  </script>
</HEAD>

<BODY>
  <div style="position:relative" id="ImageDiv">
     <img id="image2" style="container:positioned;position:absolute;top:60px;left:250px;width:236px;height:108px;" src="11.jpg">
     <img id="image2" style="container:positioned;position:absolute;top:60px;left:60px;width:236px;height:108px;" src="22.jpg" onmouseMove=moveImage()>
  </div>
</BODY>
</HTML>