Heim > Artikel > Web-Frontend > JavaScript-Methode zum Implementieren von Mausziehen zum Ändern der Ebenengröße_Javascript-Fähigkeiten
Das Beispiel in diesem Artikel beschreibt die Methode, mit JavaScript die Ebenengröße durch Ziehen mit der Maus zu ändern. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
<html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-box-sizing: border-box } #testDiv { background-color: buttonface; background-repeat: repeat; background-attachment: scroll; color: #3969A5; height: 300px; left: 30px; overflow: hidden; width: 500; z-index: 2; border: 2px outset white; margin: 0px; padding: 2px; background-position: 0% 50% } body { font-family: Verdana; font-size: 9pt } #innerNice { background-color: white; background-repeat: repeat; background-attachment: scroll; color: #3969A5; height: 100%; overflow: auto; width: 100%; border: 2px inset white; padding: 8px; background-position: 0% 50% } </style> <SCRIPT language=javascript> var theobject = null; function resizeObject() { this.el = null; //pointer to the object this.dir = ""; //type of current resize (n,s,e,w,ne,nw,se,sw) this.grabx = null; //Some useful values this.graby = null; this.width = null; this.height = null; this.left = null; this.top = null; } function getDirection(el) { var xPos, yPos, offset, dir; dir = ""; xPos = window.event.offsetX; yPos = window.event.offsetY; offset = 8; //The distance from the edge in pixels if (yPos<offset) dir += "n"; else if (yPos > el.offsetHeight-offset) dir += "s"; if (xPos<offset) dir += "w"; else if (xPos > el.offsetWidth-offset) dir += "e"; return dir; } function doDown() { var el = getReal(event.srcElement, "className", "resizeMe"); if (el == null) { theobject = null; return; } dir = getDirection(el); if (dir == "") return; theobject = new resizeObject(); theobject.el = el; theobject.dir = dir; theobject.grabx = window.event.clientX; theobject.graby = window.event.clientY; theobject.width = el.offsetWidth; theobject.height = el.offsetHeight; theobject.left = el.offsetLeft; theobject.top = el.offsetTop; window.event.returnValue = false; window.event.cancelBubble = true; } function doUp() { if (theobject != null) { theobject = null; } } function doMove() { var el, xPos, yPos, str, xMin, yMin; xMin = 8; //The smallest width possible yMin = 8; // height el = getReal(event.srcElement, "className", "resizeMe"); if (el.className == "resizeMe") { str = getDirection(el); //Fix the cursor if (str == "") str = "default"; else str += "-resize"; el.style.cursor = str; } //Dragging starts here if(theobject != null) { if (dir.indexOf("e") != -1) theobject.el.style.width = Math.max(xMin, theobject.width + window.event.clientX - theobject.grabx) + "px"; if (dir.indexOf("s") != -1) theobject.el.style.height = Math.max(yMin, theobject.height + window.event.clientY - theobject.graby) + "px"; if (dir.indexOf("w") != -1) { theobject.el.style.left = Math.min(theobject.left + window.event.clientX - theobject.grabx, theobject.left + theobject.width - xMin) + "px"; theobject.el.style.width = Math.max(xMin, theobject.width - window.event.clientX + theobject.grabx) + "px"; } if (dir.indexOf("n") != -1) { theobject.el.style.top = Math.min(theobject.top + window.event.clientY - theobject.graby, theobject.top + theobject.height - yMin) + "px"; theobject.el.style.height = Math.max(yMin, theobject.height - window.event.clientY + theobject.graby) + "px"; } window.event.returnValue = false; window.event.cancelBubble = true; } } function getReal(el, type, value) { temp = el; while ((temp != null) && (temp.tagName != "BODY")) { if (eval("temp." + type) == value) { el = temp; return el; } temp = temp.parentElement; } return el; } document.onmousedown = doDown; document.onmouseup = doUp; document.onmousemove = doMove; </SCRIPT> </head> <body> <div class="resizeMe" id="testDiv"> <div id="innerNice"> <p align="center"> </p> <p align="center"> 请在边框处拖动鼠标</p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html>
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.