图片随意移动，可以拖动图片计算

  1. <HTML>  
  2.  <HEAD>   
  3.  <META http-equiv='Content-Type' content='text/html; charset=gb2312'>   
  4.  <TITLE>图片随意移动，可以拖动图片</TITLE>   
  5. </HEAD>  
  6. <BODY bgcolor="#fef4d9" onLoad="init()">  
  7.   
  8. <mce:style type="text/css"><!--  
  9.     #plane1 {position:absolute; left:290; top:170; width:121; z-index:0}  
  10.     #plane2 {position:absolute; left:400; top:250; width:118; z-index:0}  
  11. --></mce:style><style type="text/css" mce_bogus="1">    #plane1 {position:absolute; left:290; top:170; width:121; z-index:0}  
  12.     #plane2 {position:absolute; left:400; top:250; width:118; z-index:0}</style>  
  13. <SCRIPT LANGUAGE="JavaScript">  
  14. //Modified by the CoffeeCup HTML Editor++  
  15. //http://www.coffeecup.com  
  16. // Global variables for platform branching  
  17. var isNav, isIE  
  18. if (parseInt(navigator.appVersion) >= 4) {  
  19.     if (navigator.appName == "Netscape") {  
  20.         isNav = true  
  21.     } else {  
  22.         isIE = true  
  23.     }  
  24. }  
  25.   
  26. // ***Begin CSS custom API Functions***  
  27. // Set zIndex property  
  28. function setZIndex(obj, zOrder) {  
  29.     obj.zIndex = zOrder  
  30. }  
  31. // Position an object at a specific pixel coordinate  
  32. function shiftTo(obj, x, y) {  
  33.     if (isNav) {  
  34.         obj.moveTo(x,y)  
  35.     } else {  
  36.         obj.pixelLeft = x  
  37.         obj.pixelTop = y  
  38.     }  
  39. }  
  40. // ***End API Functions***  
  41.   
  42. // Global holds reference to selected element  
  43. var selectedObj  
  44. // Globals hold location of click relative to element  
  45. var offsetX, offsetY  
  46.   
  47. // Find out which element has been clicked on  
  48. function setSelectedElem(evt) {  
  49.     if (isNav) {  
  50.         // declare local var for use in upcoming loop  
  51.         var testObj  
  52.         // make copies of event coords for use in upcoming loop  
  53.         var clickX = evt.pageX  
  54.         var clickY = evt.pageY  
  55.         // loop through all layers (starting with frontmost layer)  
  56.         // to find if the event coordinates are in the layer  
  57.         for (var i = document.layers.length - 1; i >= 0; i--) {  
  58.             testObj = document.layers[i]  
  59.             if ((clickX > testObj.left) &&   
  60.                 (clickX < testObj.left + testObj.clip.width) &&   
  61.                 (clickY > testObj.top) &&   
  62.                 (clickY < testObj.top + testObj.clip.height)) {  
  63.                     // if so, then set the global to the layer, bring it  
  64.                     // forward, and get outa here  
  65.                     selectedObj = testObj  
  66.                     setZIndex(selectedObj, 100)  
  67.                     return  
  68.             }  
  69.         }  
  70.     } else {  
  71.         // use IE event model to get the targeted element  
  72.         var imgObj = window.event.srcElement  
  73.         // make sure it's one of our planes  
  74.         if (imgObj.parentElement.id.indexOf("plane") != -1) {  
  75.             // then set the global to the style property of the element,  
  76.             // bring it forward, and say adios  
  77.             selectedObj = imgObj.parentElement.style  
  78.             setZIndex(selectedObj,100)  
  79.             return  
  80.         }  
  81.     }  
  82.     // the user probably clicked on the background  
  83.     selectedObj = null  
  84.     return  
  85. }  
  86. // Drag an element  
  87. function dragIt(evt) {  
  88.     // operate only if a plane is selected  
  89.     if (selectedObj) {  
  90.         if (isNav) {  
  91.             shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))  
  92.         } else {  
  93.             shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))  
  94.             // prevent further system response to dragging in IE  
  95.             return false  
  96.         }  
  97.     }  
  98. }  
  99. // Set globals to connect with selected element  
  100. function engage(evt) {  
  101.     setSelectedElem(evt)  
  102.     if (selectedObj) {  
  103.         // set globals that remember where the click is in relation to the  
  104.         // top left corner of the element so we can keep the element-to-cursor  
  105.         // relationship constant throughout the drag  
  106.         if (isNav) {  
  107.             offsetX = evt.pageX - selectedObj.left  
  108.             offsetY = evt.pageY - selectedObj.top  
  109.         } else {  
  110.             offsetX = window.event.offsetX  
  111.             offsetY = window.event.offsetY  
  112.         }  
  113.     }  
  114.     // block mouseDown event from forcing Mac to display  
  115.     // contextual menu.  
  116.     return false  
  117. }  
  118. // Restore elements and globals to initial values  
  119. function release(evt) {  
  120.     if (selectedObj) {  
  121.         setZIndex(selectedObj, 0)  
  122.         selectedObj = null  
  123.     }  
  124. }  
  125. // Turn on event capture for Navigator  
  126. function setNavEventCapture() {  
  127.     if (isNav) {  
  128.         document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)  
  129.     }  
  130. }  
  131. // Assign event handlers used by both Navigator and IE (called by onLoad)  
  132. function init() {  
  133.     if (isNav) {  
  134.         setNavEventCapture()  
  135.     }  
  136.     // assign functions to each of the events (works for both Navigator and IE)  
  137.     document.onmousedown = engage  
  138.     document.onmousemove = dragIt  
  139.     document.onmouseup = release  
  140. }  
  141. </SCRIPT>   
  142.   
  143.   
  144. <DIV ID=plane1><IMG NAME="planePic1" SRC="http://www.webasp.net/images/logo.gif" mce_SRC="http://www.webasp.net/images/logo.gif" BORDER=0></DIV>  
  145. <DIV ID=plane2><IMG NAME="planePic1" SRC="http://www.webasp.net/images/logos.gif" mce_SRC="http://www.webasp.net/images/logos.gif"  BORDER=0></DIV>  
  146.   
  147. </BODY></HTML>  

(from:http://www.webasp.net/javascript/1/250.htm)

  1. <HTML>  
  2. <HEAD>  
  3. <META http-equiv='Content-Type' content='text/html; charset=gb2312'>  
  4. <TITLE>页面上可以用鼠标拖动的图片pdf</TITLE>  
  5.   pdf
  6. <mce:style type="text/css"><!--  
  7. #floater {  
  8. position: absolute;  
  9. left: 500;  
  10. top: 146;  
  11. width: 125;  
  12. visibility: visible;  
  13. z-index: 10;  
  14. }  
  15. --></mce:style><style type="text/css" mce_bogus="1">#floater {  
  16. position: absolute;  
  17. left: 500;  
  18. top: 146;  
  19. width: 125;  
  20. visibility: visible;  
  21. z-index: 10;  
  22. }</style>  
  23. </HEAD>  
  24. <BODY >  
  25.   
  26. <div ID="floater" style="left: 590px; top: 158px">  
  27. <p align="center"><img SRC="http://www.webasp.net/images/logo.gif" mce_SRC="http://www.webasp.net/images/logo.gif" alt="中国WEB开发者网络"><br>  
  28. <font color="#FF8040">中国WEB开发者网络</font></p>  
  29. </div><mce:script LANGUAGE="JavaScript"><!--  
  30. self.onError=null;  
  31. currentX = currentY = 0;  
  32. whichIt = null;  
  33. lastScrollX = 0; lastScrollY = 0;  
  34. NS = (document.layers) ? 1 : 0;  
  35. IE = (document.all) ? 1: 0;  
  36. <!-- STALKER CODE -->  
  37. function heartBeat() {  
  38. if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }  
  39. if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }  
  40. if(diffY != lastScrollY) {  
  41. percent = .1 * (diffY - lastScrollY);  
  42. if(percent > 0) percent = Math.ceil(percent);  
  43. else percent = Math.floor(percent);  
  44. if(IE) document.all.floater.style.pixelTop += percent;  
  45. if(NS) document.floater.top += percent;   
  46. lastScrollYlastScrollY = lastScrollY + percent;  
  47. }  
  48. if(diffX != lastScrollX) {  
  49. percent = .1 * (diffX - lastScrollX);  
  50. if(percent > 0) percent = Math.ceil(percent);  
  51. else percent = Math.floor(percent);  
  52. if(IE) document.all.floater.style.pixelLeft += percent;  
  53. if(NS) document.floater.left += percent;  
  54. lastScrollXlastScrollX = lastScrollX + percent;  
  55. }  
  56. }  
  57. <!-- /STALKER CODE -->  
  58. <!-- DRAG DROP CODE -->  
  59. function checkFocus(x,y) {   
  60. stalkerx = document.floater.pageX;  
  61. stalkery = document.floater.pageY;  
  62. stalkerwidth = document.floater.clip.width;  
  63. stalkerheight = document.floater.clip.height;  
  64. if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;  
  65. else return false;  
  66. }  
  67. function grabIt(e) {  
  68. if(IE) {  
  69. whichIt = event.srcElement;  
  70. while (whichIt.id.indexOf("floater") == -1) {  
  71. whichItwhichIt = whichIt.parentElement;  
  72. if (whichIt == null) { return true; }  
  73. }  
  74. whichItwhichIt.style.pixelLeft = whichIt.offsetLeft;  
  75. whichItwhichIt.style.pixelTop = whichIt.offsetTop;  
  76. currentX = (event.clientX + document.body.scrollLeft);  
  77. currentY = (event.clientY + document.body.scrollTop);   
  78. } else {   
  79. window.captureEvents(Event.MOUSEMOVE);  
  80. if(checkFocus (e.pageX,e.pageY)) {   
  81. whichIt = document.floater;  
  82. StalkerTouchedX = e.pageX-document.floater.pageX;  
  83. StalkerTouchedY = e.pageY-document.floater.pageY;  
  84. }   
  85. }  
  86. return true;  
  87. }  
  88. function moveIt(e) {  
  89. if (whichIt == null) { return false; }  
  90. if(IE) {  
  91. newX = (event.clientX + document.body.scrollLeft);  
  92. newY = (event.clientY + document.body.scrollTop);  
  93. distanceX = (newX - currentX); distanceY = (newY - currentY);  
  94. currentX = newX; currentY = newY;  
  95. whichIt.style.pixelLeft += distanceX;  
  96. whichIt.style.pixelTop += distanceY;  
  97. if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;  
  98. if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;  
  99. if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;  
  100. if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;  
  101. event.returnValue = false;  
  102. } else {   
  103. whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);  
  104. if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;  
  105. if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;  
  106. if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;  
  107. if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;  
  108. return false;  
  109. }  
  110. return false;  
  111. }  
  112. function dropIt() {  
  113. whichIt = null;  
  114. if(NS) window.releaseEvents (Event.MOUSEMOVE);  
  115. return true;  
  116. }  
  117. <!-- DRAG DROP CODE -->  
  118. if(NS) {  
  119. window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);  
  120. window.onmousedown = grabIt;  
  121. window.onmousemove = moveIt;  
  122. window.onmouseup = dropIt;  
  123. }  
  124. if(IE) {  
  125. document.onmousedown = grabIt;  
  126. document.onmousemove = moveIt;  
  127. document.onmouseup = dropIt;  
  128. }  
  129. if(NS || IE) action = window.setInterval("heartBeat()",1);  
  130. // --></mce:script>  
  131.   
  132. </BODY></HTML>  
posted @ 2011-07-11 21:36  codess  阅读(393)  评论(0)  编辑  收藏  举报