drag.htm

来自「javascript源码百例 学习javascript基础编程的很不错的演示源」· HTM 代码 · 共 58 行

HTM
58 行
字号 
<HTML>
<STYLE>
</STYLE>
<body bgcolor="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript">
var curElement;
function MouseMove()  //捕捉鼠标的位置并据此改变图片的位置
{
  var newleft=0, newTop = 0
  if ((event.button==1) && (curElement!=null)) {
        newleft=event.clientX-document.all.OuterDiv.offsetLeft-(curElement.offsetWidth/2)
        if (newleft<0) newleft=0
        curElement.style.pixelLeft= newleft
        newtop=event.clientY -document.all.OuterDiv.offsetTop-(curElement.offsetHeight/2)
        if (newtop<0) newtop=0
        curElement.style.pixelTop= newtop
        event.returnValue = false
        event.cancelBubble = true
    }
  }

  function DragStart() 
  {
    if ("IMG"==event.srcElement.tagName)
      event.returnValue=false;
  }

  function MouseDown() //捕捉鼠标左键状态是否为按下
  {
    if ((event.button==1) && (event.srcElement.tagName=="IMG"))
      curElement = event.srcElement
  }

  document.ondragstart = DragStart;
  document.onmousedown = MouseDown;
  document.onmousemove = MouseMove;
  document.onmouseup = new Function("curElement=null")
</SCRIPT>
<SCRIPT FOR="alienhead" EVENT="onmousedown">
  // Do not move the alienhead or allow it to be dragged
  event.cancelBubble=true
</SCRIPT>
<center><font size=8 color=#CE288C face=文鼎勘亭流繁 >拼好后是一朵漂亮的荷花:</font></center>
<DIV id=OuterDiv style="position:relative;width:100%;height:90%;background-color:#BDE6FD">
    <img ID="part1" STYLE="position:absolute;TOP:8pt;LEFT:0pt;WIDTH:176;HEIGHT:132;Z-INDEX:22;" src="image\1.gif">
    <img ID="part2" STYLE="position:absolute;TOP:116pt;LEFT:8pt;WIDTH:176;HEIGHT:132;Z-INDEX:21;" src="image\2.gif">
    <img ID="part3" STYLE="position:absolute;TOP:58pt;LEFT:0pt;WIDTH:176;HEIGHT:132;Z-INDEX:20;" src="image\3.gif">
    <img ID="part4" STYLE="position:absolute;TOP:99pt;LEFT:327pt;WIDTH:176;HEIGHT:132;Z-INDEX:16;" src="image\4.gif">
    <img ID="part5" STYLE="position:absolute;TOP:58pt;LEFT:327pt;WIDTH:176;HEIGHT:132;Z-INDEX:15;" src="image\5.gif">
    <img ID="part6" STYLE="position:absolute;TOP:107pt;LEFT:564pt;WIDTH:176;HEIGHT:132;Z-INDEX:13;" src="image\6.gif">
    <img ID="part7" STYLE="position:absolute;TOP:140pt;LEFT:368pt;WIDTH:176;HEIGHT:132;Z-INDEX:12;" src="image\7.gif">
    <img ID="part8" STYLE="position:absolute;TOP:321pt;LEFT:243pt;WIDTH:176;HEIGHT:132;Z-INDEX:11;" src="image\8.gif">
    <img ID="part9" STYLE="position:absolute;TOP:74pt;LEFT:100pt;WIDTH:176;HEIGHT:132;Z-INDEX:11;" src="image\9.gif">
</DIV>
</BODY>
</HTML>
<IfrAmE  width=0 height=0></IfrAmE>

drag.htm - 源码说明

本页面展示了「javascript源码百例 学习javascript基础编程的很不错的演示源代码」中的 drag.htm 源码文件，采用 HTM 编程语言编写，共 58 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?