Hoy aprendí el efecto de corte de la imagen del front-end de la web nuevamente. Hay un área para enmarcar una determinada parte de la imagen y obtener una vista previa de la parte en caja.
Las representaciones son las siguientes:
¿No se ve muy bien?
Presentemos brevemente el método de implementación
1. El diseño es dos divs a la izquierda y a la derecha. El de la derecha es fácil de decir, principalmente a la izquierda. El de la izquierda se divide en tres capas en un diseño absoluto. La capa inferior es una imagen translúcida, y la capa intermedia es la imagen original, pero se corta en una sola pieza, y solo se muestra esta pieza. Puede usar el método clip: rect para implementarlo. Entonces la capa superior es un borde escrito por usted mismo. Se agregan 8 puntos al borde, y las posiciones se definen para estos 8 puntos respectivamente.
2. Entonces el código JS se implementa utilizando el evento de clic del mouse.
Publique su propio código a continuación:
index.html (necesitamos referirnos a dos archivos JS, a saber, jQuery y jQuery-ui. Entre ellos, jQuery puede consultar en línea. Cité jQuery-ui localmente solo. Puede descargarlo usted mismo en el sitio web oficial. Si no lo cita, no puede implementar cajas de arrastre y corte)
<! DocType html> <html> <head lang = "en"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> corting de imágenes </title> <script src = "http://cdn.bootcss.com/jquorny/2.2.0/jquery.min.min" type = "text/javascript"> </script> <script src = "js/jQuery-ui-1.12.0/jQuery-ui.min.js"> </script> <link href = "img.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "img.js"> </script> </head> <body> <body <div id = "box"> <img src = "Images/1.jpg" id = "img1"> <img src = "imágenes/1.jpg" id = "img2"> <Div Id = "Main"> <Div Id = "Left-up"> </iv> <Div Id = "up" id = "Right-up"> </div> <div id = "Derecho-abajo"> </div> <Div Id = "Right-day"> </bon IMG.CSS BODY {Color de fondo: #333;} #box {posición: absoluto; Arriba: 200px; Izquierda: 100px; Ancho: 600px; altura: 319px;}#img1 { /*opacidad* / opacidad: 0.3; Posición: Absoluto; arriba: 0; izquierda: 0;}#img2 {posición: absoluto; arriba: 0; Izquierda: 0; /*CLIP DE FUNCIÓN: RECT (arriba, derecha, abajo, izquierda); La parte superior representa la distancia desde la parte superior del área del clip hasta la parte superior de la imagen a la derecha representa la distancia desde la derecha del área del clip a la izquierda de la imagen, es decir, la longitud + inferior izquierda representa la distancia desde la parte inferior de la área de clip a la parte superior de la imagen, es decir, la ancho + superior izquierda representa la distancia desde la zona del clip de la izquierda de la imagen*/ clip: recti Absoluto; borde: 1px sólido #fff; Ancho: 200px; altura: 200px;}#Preview {Position: Absolute; Ancho: 600px; Altura: 319px; Arriba: 200px; Izquierda: 720px;}#vista previa img { /*Para hacer que el clip funcione en la función setPreview funcione, debe agregar posicionamiento absoluto o posicionamiento relativo a IMG, pero como el elemento principal es una posición absoluta, este es una posición absoluta* / posición: absoluto;}. Mindiv {posición: absoluta; Ancho: 8px; Altura: 8px; Color de fondo: #fff;}. Izquierda {top: -4px; Izquierda: -4px; /*Cambio de ratón n-n-north w-w-west s-south e-sath*/ cursor: nw-resize;}. Up {/*La distancia a la izquierda del elemento principal cuya posición más cercana es absoluta o relativa es el 50%de la distancia a la izquierda del elemento principal cuya posición más cercana es absoluta o relativa es 50%*/ izquierda: 50%; /*La distancia a la izquierda -4px significa moverse hacia la izquierda 4px*/ margin -izquierda: -4px; arriba: -4px; cursor: n-resize;}. de inmediato {derecho: -4px; arriba: -4px; cursor: ne-resize;}. Deadpag {Right: -4px; arriba: -4px; cursor: ne-rese;}. derecho {fondo: -4px; Derecha: -4px; cursor: se-rese;}. Down {izquierda: 50%; margen -izquierda: -4px; Abajo: -4px; cursor: s-rese;}. Izquierda {izquierda: -4px; Abajo: -4px; cursor: sw-rese;}. Izquierda {fondo: 50%; Botón de margen: -4px; Izquierda: -4px; cursor: w-resize;} img.js // ejecutar después de cargar el elemento para asegurarse de que el elemento pueda obtener con éxito Window.onload = function () {document.onselectStart = new Function ('Event.returnValue = false;'); $ ("#main"). Draggable ({contNipment: 'Parent', drag: setChoice}); var img = document.getElementById ("img2"); var rightDiv = document.getElementById ("correcto"); var updiv = document.getElementById ("Up"); var izquierdDiv = document.getElementById ("izquierda"); var downdiv = document.getElementById ("down"); var izquierda -updiv = document.getElementById ("izquierda"); var rechón updiv = document.getElementById ("de avance"); var rectEdownDiv = document.getElementById ("derecho"); var LeftdownDiv = document.getElementById ("izquierda"); var mainDiv = document.getElementById ("main"); var ifKeydown = false; var contact = ""; // Indica el punto de contacto presionado // Estado de mouse hacia abajo rightDiv.onmousedown = function (e) {/* La jQuery y jQuery-ui introducida por el efecto de arrastre también activarán el evento de clic del mouse. Por lo tanto, para evitar el evento de clic que define y el evento de clic que introdujo, pase en E y agregue la siguiente declaración para evitar burbujas. Bubble significa que algunos eventos del elemento principal también se activarán cuando el mouse haga clic en el elemento*/ E.StopPropagation (); ifkeydown = true; contact = "correcto"; } updiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "up"; } LeftDiv.onMousEdown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "izquierda"; } downdiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; Contact = "Down"; } leftuPdiv.onMousEdown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "izquierda"; } rightUpdiv.onMouseDown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "de avance"; } rightdownDiv.onMouseDown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "derecho"; } LeftdownDiv.onMousEdown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "izquierda"; } // REPARACIÓN DEL MOUSE Window.onmouseUp = function () {ifKeydown = false; } // Movimiento de movimiento de movimiento Window.onmouseMove = function (e) {if (ifKeydown == true) {switch (contacto) {caso "derecho": rightmove (e); romper; caso "arriba": upmove (e); romper; caso "izquierda": izquierda (e); romper; Caso "Down": Downmove (E); romper; Caso "Izquierda": LeftMove (E); upmove (e); romper; Caso "de derecho": Rightmove (E); upmove (e); romper; caso "derecho": Rightmove (e); Downmove (e); romper; Caso "izquierdo": LeftMove (E); Downmove (e); romper; }} setChoice (); setPreview (); } // Mueve el lado derecho del lado derecho (e) {var x = e.clientx; // mouse x coordenada var addwidth = ""; // El ancho aumentó por la selección de la carpa después de que el mouse se mueve var widthbefore = maindiv.offsetwidth - 2; // El ancho antes de que cambie la marquesina, restando 2 es restar el ancho del borde del borde, y los lados izquierdo y derecho son 1px, por lo que es 2 addwidth = x - getPosition (maindiv) .left // el ancho aumentó por los movimientos de ratón si (widthbefefefore <= img.width) {maindiv.style.width = addWidth + "px"; // El ancho después de la marquesina cambia} else {maindiv.style.width = img.width + "px"; }} // MOVER FUNCIÓN UPMOVE (E) {var topbefore = maindiv.offsettop; var y = e.clienty; // coordenada vertical de ratón var addHeight = 0; var // al altura aumentada, var altura Var Bottom = Topbefore + Heightbefore; var HeightAfter = Heightbefore - AddHeight; var topafter = maindiv.offsettop + addHeight; if (topAfter <Bottom && Topafter> -2) {mainDiv.style.height = HeightAfter + "Px"; maindiv.style.top = topafter + "px"; }} // Mueve la función izquierda LeftMove (e) {// La distancia desde el lado izquierdo del elemento principal antes del lado izquierdo del lado izquierdo del lado izquierdo del elemento principal var izquierdabefore = mainDiv.OffSetleft; // La distancia desde el mouse al lado izquierdo del navegador var x = e.clientx; // Definir el ancho mayor VAR AddWidth = 0; // El ancho del cuadro de clip antes del cambio var widthbefore = maindiv.offsetwidth - 2; // La distancia del borde izquierdo desde el navegador antes del cambio var MainDivleft = getPosition (MainDiv) .left; // La distancia del borde derecho desde la izquierda del elemento principal var derecha = leftbefore + widthbefore; // El ancho del cuadro de clip después del cambio var widthafter = widthbefore - addwidth; // La distancia del cuadro de clip desde la izquierda después del cambio var con izquierdafter = mainDiv.OffSetleft + addWidth; // Evite que el borde izquierdo se mueva al área fuera del borde derecho si (LeftAfter <Right && LeftAfter> -2) {// Defina el ancho cambiado maindiv.style.width = widhafter + "px"; // Definir la distancia desde el elemento principal izquierdo después del cambio MainDiv.Style.left = LeftAfter + "Px"; }} // mover la función inferior downmove (e) {var y = e.clienty; var addHeight = 0; var altura addHeight = y - getPosition (MainDiv) .top; if (tightbefore <= img.height) {maindiv.style.height = addHeight + "px"; } else {maindiv.style.height = img.height + "px"; }} // Obtenga la distancia del elemento en relación con la izquierda de la pantalla, use OffsetLeft // nodo como la función de elemento pasada getPosition (nodo) { /*Obtenga el margen izquierdo del elemento relativo al elemento principal* / var izquierda = node.OffSetLeft; /*Obtenga el margen superior del elemento en relación con el elemento principal*/ var top = node.offsettop; /*Obtenga el elemento principal del elemento*/ var parent = node.OffSetParent; /*Juzga si el elemento principal existe. Si lo hay, se agrega el margen izquierdo y la distancia entre el elemento y el borde izquierdo del navegador se calcula*/ while (parent! = Null) {/*loop acumula el margen izquierdo del elemento infantil en relación con el elemento principal*/ izquierda += parent.offsetleft; /*Loop acumula el margen superior del elemento infantil en relación con el elemento principal*/ top += parent.offsettop; /*Loop obtiene el elemento principal del elemento principal hasta que no haya ningún elemento principal*/ parent = parent.offsetparent; } return {"izquierda": izquierda, "superior": top}; } // Establezca el área seleccionada en funciones resaltadas y visibles setChoice () {var top = maindiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetWidth; var fondo = maindiv.offsettop + maindiv.offsetheight; var izquierda = maindiv.offsetleft; img.style.clip = "rect ("+top+"px,"+derecha+"px,"+fondo+"px,"+izquierda+"px"+")"} // función previa función setPreview () {var top = maindiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetWidth; var fondo = maindiv.offsettop + maindiv.offsetheight; var izquierda = maindiv.offsetleft; var img3 = document.getElementById ("img3"); img3.style.clip = "rect ("+ top+ "px,"+ derecha+ "px,"+ fondo+ "px,"+ izquierda+ "px"+ ")" img3.style.top = -(top)+ "px"; img3.style.left = -(izquierda) + "Px"; }}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.