Aujourd'hui, j'ai appris à nouveau l'effet de coupe d'image du Web frontal. Il y a un domaine pour encadrer une certaine partie de l'image et prévisualiser la pièce en boîte.
Les rendus sont les suivants:
Ça n'a pas l'air très cool
Présenons brièvement la méthode de mise en œuvre
1. La disposition est deux divs à gauche et à droite. Celui à droite est facile à dire, principalement à gauche. Celui de gauche est divisé en trois couches dans une disposition absolue. La couche inférieure est une image translucide, et la couche moyenne est l'image d'origine, mais elle est coupée en une seule pièce, et seule cette pièce est affichée. Vous pouvez utiliser la méthode Clip: Rect pour l'implémenter. Ensuite, la couche supérieure est une bordure écrite par vous-même. 8 points sont ajoutés à la frontière et les positions sont définies respectivement pour ces 8 points.
2. Ensuite, le code JS est implémenté à l'aide de l'événement de clic de souris.
Publiez votre propre code ci-dessous:
index.html (nous devons nous référer à deux fichiers JS, à savoir jQuery et jQuery-UI. Parmi eux, jQuery peut se référer en ligne. J'ai cité jQuery-UI localement par moi-même.
<! Doctype html> <html> <head lang = "en"> <meta http-equiv = "content-type" contenu = "text / html; charset = utf-8"> <title> Cutting </ title> <script src = "http://cdn.bootcsss.com/jquery/2.2.0/jquery Type = "Text / Javascript"> </ Script> <Script Src = "JS / JQuery-Ui-1.12.0 / jQuery-Ui.min.js"> </ Script> <Link Href = "img.css" rel = "Stylesheet" src="img.js"></script></head><body> <div id="box"> <img src="images/1.jpg" id="img1"> <img src="images/1.jpg" id="img2"> <div id="main"> <div id="left-up"></div> <div id="up"></div> <div id = "droite"> </ div> <div id = "droite"> </ div> <div id = "droite"> </ div> <div id = "gauche"> </ div> <div id = "Left"> </ div> </ div> </ div> <div id = "préview"> <img src = "images / 1.jpg" id = "img3"> </div> </ body> </html> img.css body {background-color: # 333;} # box {position: absolu; en haut: 200px; Gauche: 100px; Largeur: 600px; hauteur: 319px;} # img1 {/ * opacité * / opacité: 0,3; Position: absolue; en haut: 0; gauche: 0;} # img2 {position: absolue; en haut: 0; à gauche: 0; / * Fonction Clip: RECT (haut, droit, en bas, gauche); Le haut représente la distance entre le haut de la zone de clip vers le haut de l'image, la droite représente la distance entre la droite de la zone de clip à gauche de l'image, c'est-à-dire que la longueur + le bas gauche représente la distance du bas de la zone de clip vers le haut de l'image, c'est-à-dire la largeur + en haut à gauche représente la distance de la gauche de la zone de clip vers la gauche de l'image * / Clip: RECT (0, 200PX, 200PX, 0); absolu; Border: 1px solide #fff; Largeur: 200px; hauteur: 200px;} # aperçu {position: absolue; Largeur: 600px; hauteur: 319px; en haut: 200px; gauche: 720px;} # aperçu img {/ * Pour faire la fonction du clip dans la fonction SetPreview Work, vous devez ajouter un positionnement absolu ou un positionnement relatif à IMG, mais comme l'élément parent est un positionnement absolu, c'est un positionnement absolu * / position: absolue;}. Mindiv {position: absolue; Largeur: 8px; hauteur: 8px; Background-Color: #fff;}. gauche {top: -4px; gauche: -4px; / * Changement de souris N-N-NORT W-W-WEST S-South E-East * / Cursor: NW-RESIZE;}. Up {/ * La distance à gauche de l'élément parent dont la position la plus proche est absolue ou relative est 50% de la distance à gauche de l'élément parent dont la position la plus proche est absolue ou relative est 50% * / gauche: 50%; / * La distance vers la gauche -4px signifie se déplacer vers le 4px gauche * / marge-left: -4px; en haut: -4px; curseur: n-résiSize;}. Right-up {droite: -4px; en haut: -4px; curseur: ne-résiSize;}. Right-up {droite: -4px; en haut: -4px; curseur: ne-résiSize;}. droite {inférieur: -4px; à droite: -4px; curseur: se-résiSize;}. Down {Left: 50%; marge-gauche: -4px; En bas: -4px; curseur: s-résiSize;}. gauche {gauche: -4px; En bas: -4px; Cursor: SW-Résise;}. Left {Bas: 50%; marge-fond: -4px; gauche: -4px; curseur: w-résiSize;} img.js // exécuter une fois que l'élément est chargé pour s'assurer que l'élément peut obtenir avec succès Window.onLoad = function () {document.onselectStart = new function ('event.returnValue = false;'); $ ("# main"). draggable ({confinement: 'parent', glisser: setChoice}); var img = document.getElementById ("img2"); var droitediv = document.getElementById ("droit"); var Updiv = document.getElementById ("up"); var deftdiv = document.getElementById ("Left"); var downdiv = document.getElementById ("down"); var dufUpDiv = document.getElementById ("gauche"); var justupDiv = document.getElementById ("droite"); var droitedowndiv = document.getElementById ("droite"); var LeftownDiv = document.getElementById ("gauche"); var maindiv = document.getElementById ("main"); var ifkeydown = false; Var Contact = ""; // indique le point de contact pressé // l'état de la souris droiteddiv.onmousedown = fonction (e) {/ * L'événement jQuery et jQuery-UI introduit par l'effet de glisser déclenchera également l'événement de clic de souris. Par conséquent, afin d'éviter l'événement de clic que vous définissez et l'événement de clic que vous avez introduit, passez dans E et ajoutez l'instruction suivante pour empêcher les bulles. La bulle signifie que certains événements de l'élément parent seront également déclenchés lorsque la souris clique sur l'élément * / e.stoppropagation (); ifkeydown = true; contact = "droit"; } Updiv.OnmouSedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "up"; } LeftDiv.Onmousedown = function (e) {e.Stoppropagation (); ifkeydown = true; contact = "Left"; } downdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "down"; } dufUpDiv.Onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "gauche"; } justupdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "droite"; } droitedowndiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "droite"; } LeftDownDiv.OnmousDown = fonction (e) {e.Stoppropagation (); ifkeydown = true; contact = "gauche"; } // La fenêtre d'état de libération de la souris.onMouseUp = function () {ifkeydown = false; } // Window de l'événement de mouvement de souris.onMouSemove = function (e) {if (ifkeydown == true) {switch (contact) {case "droite": droite (e); casser; cas "up": upmove (e); casser; cas "gauche": Leftmove (e); casser; cas "Down": Downmove (e); casser; cas "gauche": Leftmove (e); upmove (e); casser; cas "droit": droite (e); upmove (e); casser; cas "droit": droite (e); Downmove (e); casser; cas "gauche": Leftmove (e); Downmove (e); casser; }} setChoice (); setPreview (); } // Déplacez le côté droit droit (e) {var x = e.clientx; // la souris x coordonnée var addWidth = ""; // La largeur a augmenté par la sélection du chapiteau après que la souris ait déplacé Var WidthBefore = Maindiv.offsetWidth - 2; // La largeur avant les modifications du chapiteau, la soustraction de 2 consiste à soustraire la largeur de la bordure de la bordure, et les côtés gauche et droit sont 1px, il est donc 2 addWidth = x - getPosition (Maindiv) .left // La largeur augmentée par les mouvements de la souris if (widthbefore <= img.width) {maindiv.style.width = addwidth + "px"; // la largeur après le chapiteau change} else {maindiv.style.width = img.width + "px"; }} // Move function upmove (e) {var topBefore = MainDiv.offSetTop; var y = e.clienty; // coordonnées verticales de souris var addHeight = 0; var mainy = getPosition (maindiv) .top; // la distance du chapiteau de sélection en haut de l'écran addHeight = y - mainy; // Hauteur accrue, var hauteur avant = Maindiv.offsetheight - 2; var bottom = topbefore + heightbefore; var heightafter = highbefore - addHeight; var topafter = maindiv.offsettop + addHeight; if (topafter <inférieur && topafter> -2) {maindiv.style.height = heightafter + "px"; maindiv.style.top = topafter + "px"; }} // Déplacez la fonction gauche gauche (e) {// la distance entre le côté gauche de l'élément parent avant le côté gauche du côté gauche du côté gauche de l'élément parent var gauchefore = Maindiv.offsetleft; // La distance entre la souris vers le côté gauche du navigateur var x = e.clientx; // définir la largeur augmentée var addWidth = 0; // La largeur de la boîte de clip avant le changement var widgefore = maindiv.offsetwidth - 2; // La distance de la bordure gauche du navigateur avant le changement var maindivleft = getPosition (Maindiv) .left; // La distance de la bordure droite de la gauche de l'élément parent var droite = gauchefore + widthBefore; // La largeur de la boîte de clip après le changement var widthafter = widthBefore - addWidth; // La distance de la boîte de clip de la gauche après le changement var duftafter = Maindiv.offsetleft + addWidth; // Empêche la bordure gauche de se déplacer vers la zone à l'extérieur de la bordure droite si (Leftafter <droite && leftafter> -2) {// Définissez la largeur modifiée MainDiv.Style.Width = widthafter + "px"; // Définissez la distance de l'élément parent gauche après le changement maindiv.style.left = leftafter + "px"; }} // déplacez la fonction inférieure downmove (e) {var y = e.clienty; var addHeight = 0; var heightBefore = Maindiv.offsetheight - 2; addHeight = y - getPosition (Maindiv) .top; if (highbefore <= img.height) {maindiv.style.height = addHeight + "px"; } else {maindiv.style.height = img.height + "px"; }} // Obtenez la distance de l'élément par rapport à la gauche de l'écran, utilisez OffsetLeft // Node comme fonction d'élément passé GetPosition (Node) {/ * Obtenez la marge gauche de l'élément par rapport à l'élément parent * / var Left = Node.offSetleft; / * Obtenez la marge supérieure de l'élément par rapport à l'élément parent * / var top = node.offsetTop; / * Obtenez l'élément parent de l'élément * / var parent = Node.offSetparent; / * Juger si l'élément parent existe. S'il y en a, la marge gauche est ajoutée et la distance entre l'élément et le bord gauche du navigateur est calculée * / while (parent! = Null) {/ * Loop accumule la marge gauche de l'élément enfant par rapport à l'élément parent * / gauche + = parent.offsetleft; / * Loop accumule la marge supérieure de l'élément enfant par rapport à l'élément parent * / top + = parent.offsetTop; / * Loop obtient l'élément parent de l'élément parent jusqu'à ce qu'il n'y ait pas d'élément parent * / parent = parent.offSetparent; } return {"Left": Left, "top": top}; } // Définissez la zone sélectionnée pour mettre en surbrillance et visible la fonction setChoice () {var top = MainDiv.offSetTop; var droit = Maindiv.offsetleft + Maindiv.offsetWidth; var bottom = Maindiv.offsetTop + Maindiv.offSetheight; var Left = Maindiv.offsetLeft; img.style.clip = "rect (" + top + "px," + droite + "px," + inférieur + "px," + Left + "px" + ")"} // fonction de la fonction de prévisualité setPreview () {var top = MainDiv.offSetTop; var droit = Maindiv.offsetleft + Maindiv.offsetWidth; var bottom = Maindiv.offsetTop + Maindiv.offSetheight; var Left = Maindiv.offsetLeft; var img3 = document.getElementById ("img3"); img3.style.clip = "rect (" + top + "px," + droit + "px," + inférieur + "px," + gauche + "px" + ")" img3.style.top = - (top) + "px"; img3.style.left = - (gauche) + "px"; }}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.