📄 drag.htm

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码
💻 HTM
字号:
<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>
⌨️ 快捷键说明

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