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

来源：互联网发布：网络教育研究生吗编辑：程序博客网时间：2024/04/28 15:40

<HTML><HEAD><META http-equiv='Content-Type' content='text/html; charset=gb2312'><TITLE>图片随意移动，可以拖动图片</TITLE></HEAD><BODY bgcolor="#fef4d9" onLoad="init()"><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #plane1 {position:absolute; left:290; top:170; width:121; z-index:0} #plane2 {position:absolute; left:400; top:250; width:118; z-index:0}</style><SCRIPT LANGUAGE="JavaScript">//Modified by the CoffeeCup HTML Editor++//http://www.coffeecup.com// Global variables for platform branchingvar isNav, isIEif (parseInt(navigator.appVersion) >= 4) { if (navigator.appName == "Netscape") { isNav = true } else { isIE = true }}// ***Begin CSS custom API Functions***// Set zIndex propertyfunction setZIndex(obj, zOrder) { obj.zIndex = zOrder}// Position an object at a specific pixel coordinatefunction shiftTo(obj, x, y) { if (isNav) { obj.moveTo(x,y) } else { obj.pixelLeft = x obj.pixelTop = y }}// ***End API Functions***// Global holds reference to selected elementvar selectedObj// Globals hold location of click relative to elementvar offsetX, offsetY// Find out which element has been clicked onfunction setSelectedElem(evt) { if (isNav) { // declare local var for use in upcoming loop var testObj // make copies of event coords for use in upcoming loop var clickX = evt.pageX var clickY = evt.pageY // loop through all layers (starting with frontmost layer) // to find if the event coordinates are in the layer for (var i = document.layers.length - 1; i >= 0; i--) { testObj = document.layers[i] if ((clickX > testObj.left) && (clickX < testObj.left + testObj.clip.width) && (clickY > testObj.top) && (clickY < testObj.top + testObj.clip.height)) { // if so, then set the global to the layer, bring it // forward, and get outa here selectedObj = testObj setZIndex(selectedObj, 100) return } } } else { // use IE event model to get the targeted element var imgObj = window.event.srcElement // make sure it's one of our planes if (imgObj.parentElement.id.indexOf("plane") != -1) { // then set the global to the style property of the element, // bring it forward, and say adios selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } } // the user probably clicked on the background selectedObj = null return}// Drag an elementfunction dragIt(evt) { // operate only if a plane is selected if (selectedObj) { if (isNav) { shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY)) } else { shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY)) // prevent further system response to dragging in IE return false } }}// Set globals to connect with selected elementfunction engage(evt) { setSelectedElem(evt) if (selectedObj) { // set globals that remember where the click is in relation to the // top left corner of the element so we can keep the element-to-cursor // relationship constant throughout the drag if (isNav) { offsetX = evt.pageX - selectedObj.left offsetY = evt.pageY - selectedObj.top } else { offsetX = window.event.offsetX offsetY = window.event.offsetY } } // block mouseDown event from forcing Mac to display // contextual menu. return false}// Restore elements and globals to initial valuesfunction release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null }}// Turn on event capture for Navigatorfunction setNavEventCapture() { if (isNav) { document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) }}// Assign event handlers used by both Navigator and IE (called by onLoad)function init() { if (isNav) { setNavEventCapture() } // assign functions to each of the events (works for both Navigator and IE) document.onmousedown = engage document.onmousemove = dragIt document.onmouseup = release}</SCRIPT> <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><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></BODY></HTML>

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

<HTML><HEAD><META http-equiv='Content-Type' content='text/html; charset=gb2312'><TITLE>页面上可以用鼠标拖动的图片</TITLE><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#floater {position: absolute;left: 500;top: 146;width: 125;visibility: visible;z-index: 10;}</style></HEAD><BODY ><div ID="floater" style="left: 590px; top: 158px"><p align="center"><img SRC="http://www.webasp.net/images/logo.gif" mce_SRC="http://www.webasp.net/images/logo.gif" alt="中国WEB开发者网络"><br><font color="#FF8040">中国WEB开发者网络</font></p></div><mce:script LANGUAGE="JavaScript">function heartBeat() {if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }if(diffY != lastScrollY) {percent = .1 * (diffY - lastScrollY);if(percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater.style.pixelTop += percent;if(NS) document.floater.top += percent; lastScrollY = lastScrollY + percent;}if(diffX != lastScrollX) {percent = .1 * (diffX - lastScrollX);if(percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);if(IE) document.all.floater.style.pixelLeft += percent;if(NS) document.floater.left += percent;lastScrollX = lastScrollX + percent;}}function checkFocus(x,y) { stalkerx = document.floater.pageX;stalkery = document.floater.pageY;stalkerwidth = document.floater.clip.width;stalkerheight = document.floater.clip.height;if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;else return false;}function grabIt(e) {if(IE) {whichIt = event.srcElement;while (whichIt.id.indexOf("floater") == -1) {whichIt = whichIt.parentElement;if (whichIt == null) { return true; }}whichIt.style.pixelLeft = whichIt.offsetLeft;whichIt.style.pixelTop = whichIt.offsetTop;currentX = (event.clientX + document.body.scrollLeft);currentY = (event.clientY + document.body.scrollTop); } else { window.captureEvents(Event.MOUSEMOVE);if(checkFocus (e.pageX,e.pageY)) { whichIt = document.floater;StalkerTouchedX = e.pageX-document.floater.pageX;StalkerTouchedY = e.pageY-document.floater.pageY;} }return true;}function moveIt(e) {if (whichIt == null) { return false; }if(IE) {newX = (event.clientX + document.body.scrollLeft);newY = (event.clientY + document.body.scrollTop);distanceX = (newX - currentX); distanceY = (newY - currentY);currentX = newX; currentY = newY;whichIt.style.pixelLeft += distanceX;whichIt.style.pixelTop += distanceY;if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;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;event.returnValue = false;} else { whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;return false;}return false;}function dropIt() {whichIt = null;if(NS) window.releaseEvents (Event.MOUSEMOVE);return true;}if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);window.onmousedown = grabIt;window.onmousemove = moveIt;window.onmouseup = dropIt;}if(IE) {document.onmousedown = grabIt;document.onmousemove = moveIt;document.onmouseup = dropIt;}if(NS || IE) action = window.setInterval("heartBeat()",1);// --></mce:script></BODY></HTML>

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