Heute habe ich wieder den Bildausfall des Web-Front-Ends gelernt. Es gibt einen Bereich, in dem ein bestimmter Teil des Bildes gestaltet und der Boxed -Teil vorschau ist.
Die Renderings sind wie folgt:
Sieht es nicht sehr cool aus?
Lassen Sie uns kurz die Implementierungsmethode vorstellen
1. Das Layout besteht aus zwei Divs links und rechts. Der rechts ist leicht zu sagen, hauptsächlich auf der linken Seite. Der links ist in drei Schichten in einem absoluten Layout unterteilt. Die untere Schicht ist ein durchscheinendes Bild, und die mittlere Schicht ist das Originalbild, wird jedoch nur in ein Stück geschnitten, und nur dieses Stück wird angezeigt. Sie können den Clip: RECT -Methode verwenden, um ihn zu implementieren. Dann ist die oberste Schicht ein von Ihnen geschriebener Grenze. Der Grenze werden 8 Punkte hinzugefügt, und die Positionen werden für diese 8 Punkte definiert.
2. Dann wird der JS -Code mit dem Mausklickereignis implementiert.
Veröffentlichen Sie unten Ihren eigenen Code:
Index.html (Wir müssen auf zwei JS-Dateien verweisen, nämlich JQuery und Jquery-Ui. Unter ihnen kann JQuery online verweisen. Ich habe Jquery-UI vor Ort selbst zitiert.
<! DocType html> <html> <head Lang = "en"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> bildschneides </title> <script src = "http://cdn.bootcs.com/jquery type = "text/javaScript"> </script> <script src = "js/jquery-ui-1.12.0/jquery-ui.min src = "img.js"> </script> </head> <body> <div id = "box"> <img src = "bilder/1.jpg" id = "img1"> <img src = "bilder/1.jpg" id = "img2"> <div id = "Main"> </div id = "links up"> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</Dives> </DIV). id = "right-up"> </div> <div id = "rechts"> </div> <div id = "rechts"> </div> <div id = "links-down"> </div> <div id = "links"> </div> </div> </div> <div id = "preview"> <img src = "id" id "id" id "id" i img3 " Img.css Body {Hintergrundfarbe: #333;} #Box {Position: Absolute; Top: 200px; Links: 100px; Breite: 600px; Höhe: 319px;}#img1 { /*Opazität* / Opazität: 0,3; Position: absolut; Top: 0; links: 0;}#img2 {Position: absolut; Top: 0; links: 0; /*Funktionsclip: rechte (oben, rechts, unten, links); Oben repräsentiert den Abstand von der Oberseite des Clipbereichs bis zur Oberseite des Bildes rechts den Abstand von rechts im Clipbereich nach links des Bildes. Die Länge + linker unten repräsentiert den Abstand von der Unterseite des Clip -Bereichs zur Oberseite des Bildes, dh die Breite + oben links repräsentiert den Abstand von links des Clips nach links. absolut; Grenze: 1PX Solid #fff; Breite: 200px; Höhe: 200px;}#Vorschau {Position: absolut; Breite: 600px; Höhe: 319px; Top: 200px; Links: 720px;}#Preview IMG { /*Um die Clip -Funktion in der Funktionsetpreview funktionieren zu können, müssen Sie IMG die absolute Positionierung oder eine relative Positionierung hinzufügen, aber da das übergeordnete Element absolute Positionierung ist, ist dies eine absolute Positionierung* / Position: absolut;}. Mindiv {Position: absolut; Breite: 8px; Höhe: 8px; Hintergrundfarbe: #fff;}. Left-up {top: -4px; links: -4px; /*Mausänderung N-N-North W-West S-South E-East*/ Cursor: nw-resize;}. Up {/*Die Abteilung links vom übergeordneten Element, dessen engste Position absolut oder relativ ist, beträgt 50%der Entfernung nach links vom übergeordneten Element, dessen engste Position absolut oder relativ ist 50%*/ links: 50%; /*Der Abstand nach links -4px bedeutet, sich nach links 4px zu bewegen*/ Margin -links: -4px; Top: -4px; Cursor: n-resize;}. Right-up {rechts: -4px; Top: -4px; Cursor: NE-RESIZE;}. Right-up {rechts: -4px; Top: -4px; Cursor: NE-RESIZE;}. rechts nach unten {unten: -4px; Rechts: -4px; Cursor: SE-RESIZE;}. Down {links: 50%; Rand -Links: -4px; unten: -4px; Cursor: S-RESIZE;}. Links-down {links: -4px; unten: -4px; Cursor: sw-resize;}. links {unten: 50%; Randboot: -4px; links: -4px; Cursor: W-RESIZE;} img.js // Ausführen nach dem Laden des Elements, um sicherzustellen, dass das Element das Fenster erfolgreich erhalten kann. $ ("#main"). Draggable ({Containment: 'Parent', Drag: setChoice}); var img = document.getElementById ("img2"); var rightdiv = document.getElementById ("rechts"); var updiv = document.getElementById ("up"); var linksdiv = document.getElementById ("links"); var downdiv = document.getElementById ("Down"); var linksUpdiv = document.getElementById ("links"); var rightupdiv = document.getElementById ("Right-up"); var rightdowndiv = document.getElementById ("rechts"); var linksdowndiv = document.getElementById ("links-down"); var maindiv = document.getElementById ("Main"); var ifKeydown = false; var contact = ""; // Zeigt den gedrückten Kontaktpunkt an // Maus nach unten status rightdiv.onmouseDown = function (e) {/* Die durch den Drag-Effekt eingeführte JQuery und JQuery-UI auslösen auch das Mausklickereignis. Um das von Ihnen definierte Klickereignis und das von Ihnen eingeführte Klickereignis zu verhindern, geben Sie daher E in E und fügen Sie die folgende Anweisung hinzu, um Blasen zu verhindern. Blase bedeutet, dass einige Ereignisse des übergeordneten Elements auch ausgelöst werden, wenn die Maus auf das Element*/ e.stoppropagation () klickt; ifKeydown = true; contact = "rechts"; } updiv.onmouseDown = function (e) {e.StopPropagation (); ifKeydown = true; contact = "up"; } LeftDiv.onmouseDown = Funktion (e) {e.StopPropagation (); ifKeydown = true; contact = "links"; } downdiv.onmouseDown = function (e) {e.StopPropagation (); ifKeydown = true; contact = "down"; } retsUpdiv.onmouseDown = Funktion (e) {e.StopPropagation (); ifKeydown = true; contact = "links-up"; } rightupdiv.onmouseDown = Funktion (e) {e.StopPropagation (); ifKeydown = true; contact = "right-up"; } rechtsdowndiv.onmouseDown = Funktion (e) {e.StopPropagation (); ifKeydown = true; contact = "rechts"; } linksdowndiv.onmouseDown = Funktion (e) {e.StopPropagation (); ifKeydown = true; contact = "links-down"; } // Mouse Release -Statusfenster.onmouseUp = function () {ifKeydown = false; } // Mausbewegungsereignisfenster.onmousemove = Funktion (e) {if (ifKeydown == true) {switch (contact) {case "rechts": rightMove (e); brechen; Fall "up": upmove (e); brechen; Fall "links": Leftmove (e); brechen; Fall "Down": Downmove (e); brechen; Fall "links": Leftmove (e); upmove (e); brechen; Fall "Right-up": RightMove (e); upmove (e); brechen; Fall "rechts": rightmove (e); Downmove (e); brechen; Fall "links down": Leftmove (e); Downmove (e); brechen; }} setChoice (); setPreview (); } // die rechte Seite rechts verschieben (e) {var x = e.clientX; // Maus x Koordinate var addwidth = ""; // Die Breite erhöhte sich durch die Auswahl des Festzeltes, nachdem sich die Maus var Breite bewegt = maindiv.offsetwidth - 2; // Die Breite vor dem Festzelt ändert sich, subtrahieren 2 die Breite des Grenzrandes, und die linke und die rechte Seite sind 1PX, so dass es 2 Addwidth = x - GetPosition (maindiv) .left // Die Breite, die durch die Mausbewegungen erhöht wurde, wenn (breite (widthBefore <= img.width) {Maindiv.style.style.style.style.stylyle.stylyle.stylyle.stylyle.style.width = addwidth); // Die Breite nach dem Festzelt ändert} else {mainDiv.style.width = img.width + "px"; }} // FUNKTION UPMOVE (e) {var topBefore = mainDiv.offsettop; var y = e.clienty; // vertikale Koordinaten -Maus -Koordinaten var addHeight = 0; var miny = GetPosition (MainDIV) .Top; // Die Entfernung des Auswahlmundmarke zum oberen Rand des Bildschirms addHeight = y - miny; // erhöhte Höhe, var heightbefore = mainDiv.offseteight - 2; var boden = oberbevor + hohbeforde; var heightafter = heightbefore - addHeight; var topafter = mainDiv.offsettop + addHeight; if (topafter <bootas && topafter> -2) {mainDiv.style.height = heightafter + "px"; MainDiv.Style.top = topafter + "px"; }} // Verschieben Sie die linke Funktion linke (e) {// den Abstand von der linken Seite des übergeordneten Elements vor der linken Seite der linken Seite der linken Seite des übergeordneten Elements var links. // den Abstand von der Maus zur linken Seite des Browsers var x = e.clientx; // Definieren Sie die erhöhte Breite var addwidth = 0; // die Breite des Clip -Box vor der Änderung var breitbeforde = mainDiv.offsetwidth - 2; // die Entfernung der linken Rand vom Browser vor dem Änderungswechsel var maindivleft = GetPosition (MainDIV) .Left; // die Entfernung des rechten Randes von links vom übergeordneten Element var rechts = links + Breite vor dem; // Die Breite des Clip -Boxs nach der Änderung var widttherter = widthBefore - Addwidth; // Die Entfernung des Clipbox von links nach der Änderung var links = mainDiv.offsetLeft + Addwidth; // verhindern, dass die linke Grenze in den Bereich außerhalb der rechten Grenze wechselt, wenn (links <rechts && linke> -2) {// die veränderte Breite maindiv.style.width = widTHTHAfter + "px" definieren; // Definieren Sie den Abstand vom linken übergeordneten Element nach der Änderung maindiv.style.left = links + "px"; }} // Bewegen Sie die niedrigere Funktion Downmove (e) {var y = e.clienty; var addHeight = 0; var heightbefore = mainDiv.offseteight - 2; addHeight = y - GetPosition (MainDIV) .Top; if (Highbefore <= img.height) {mainDiv.style.Height = addHeight + "px"; } else {mainDiv.style.height = img.height + "px"; }} // Verwenden Sie den Abstand des Elements relativ links im Bildschirm, OffsetLeft // Knoten als übergebene Elementfunktion GetPosition (Knoten) { /*Nehmen Sie den linken Rand des Elements relativ zum übergeordneten Element* / var links = node.offsetleft; /*Holen Sie sich den oberen Rand des Elements relativ zum übergeordneten Element*/ var top = node.offsettop; /*Holen Sie sich das übergeordnete Element des Elements*/ var parent = node.OffsetParent; /*Beurteilen Sie, ob das übergeordnete Element existiert. Wenn es vorhanden ist, wird der linke Rand hinzugefügt und der Abstand zwischen dem Element und dem linken Rand des Browsers wird berechnet*/ while (übergeordnet! /*Loop sammelt den oberen Rand des untergeordneten Elements relativ zum übergeordneten Element*/ top += parent.offsettop; /*Loop erhält das übergeordnete Element des übergeordneten Elements, bis kein übergeordnetes Element*/ parent.offsetParent vorhanden ist; } return {"links": links, "top": top}; } // Setzen Sie den ausgewählten Bereich auf das Markieren und die sichtbaren Funktion setChoice () {var top = mainDiv.offsettop; var right = mainDiv.offsetLeft + mainDiv.Offsetwidth; var bouts = mainDiv.offsettop + mainDiv.offseteight; var links = mainDiv.offsetLeft; img.style.clip = "rect ("+top+"px,"+rechts+"px",+boden+"px,"+links+"px"+")"} // Vorschaufunktion Funktion SetPreview () {var top = maindiv.offsettop; var right = mainDiv.offsetLeft + mainDiv.Offsetwidth; var bouts = mainDiv.offsettop + mainDiv.offseteight; var links = mainDiv.offsetLeft; var img3 = document.getElementById ("img3"); img3.Style.clip = "rect ("+ top+ "px,"+ rechts+ "px",+ boden+ "px," links+ "px"+ ")" img3.style.top = -(ober)+ "px"; img3.style.left = -(links) + "px"; }}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.