Hoje aprendi o efeito de corte de imagem do front-end da Web novamente. Existe uma área para enquadrar uma certa parte da imagem e visualizar a parte em caixa.
As renderizações são as seguintes:
Não parece muito legal
Vamos apresentar brevemente o método de implementação
1. O layout é dois divs à esquerda e direita. A à direita é fácil de dizer, principalmente à esquerda. O da esquerda é dividido em três camadas em um layout absoluto. A camada inferior é uma imagem translúcida e a camada do meio é a imagem original, mas é cortada em apenas uma peça e apenas esta peça é exibida. Você pode usar o método clipe: RECT para implementá -lo. Então a camada superior é uma fronteira escrita por você. 8 pontos são adicionados à borda e as posições são definidas para esses 8 pontos, respectivamente.
2. Em seguida, o código JS é implementado usando o evento de clique do mouse.
Publique seu próprio código abaixo:
Index.html (precisamos nos referir a dois arquivos JS, a saber, JQuery e JQuery-Ui. Entre eles, o jQuery pode se referir a on-line. Citei o JQuery-Ui localmente por mim mesmo. Você pode fazer o download no site oficial. Se você não o cita, não pode implementar caixas de arrastar e cortar)
<! Doctype html> <html> <head lang = "pt"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> corte de imagem </title> <script src = "http://cdn.bootcss.comn-mcom.brcs.crds.cripts.brcss.com/criptss.cripts.brcss.criptss.cripts.brcss.criptss.com. 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 "" src = "img.js"> </script> </head> <body> <div id = "box"> <img src = "imagens/1.jpg" id = "img1"> <img src = "imagens/1.jpg" id = "img2"> <div = "main> <d id =" saine "> <jpg" iD = "img2"> <div = "main> <d id =" esquerdo id = "Right-up"> </div> <div id = "Direita-down"> </div> <div id = "direito"> </div> <div id = "esquerda-down"> </div> <div id = "left"> </div> </divg "</div> <id id =" visualize "> <mg src =" imagens/1.jpg "ids </" idéia "> </Div> </divg IMG.CSS Body {Background-Color: #333;} #Box {Position: Absolute; TOP: 200px; Esquerda: 100px; Largura: 600px; Altura: 319px;}#img1 { /*opacidade* / opacidade: 0.3; Posição: Absoluto; topo: 0; Esquerda: 0;}#img2 {posição: absoluto; topo: 0; Esquerda: 0; /*Clipe de função: rect (superior, direita, inferior, esquerda); A parte superior representa a distância da parte superior da área de clipe até a parte superior da imagem, representa a distância da direita da área de clipe à esquerda da imagem, ou seja, o comprimento + inferior esquerdo representa a distância da parte inferior da área de clipe para a parte superior da figura, que é a largura e a parte superior esquerda reproduz a distância da esquerda da esquerda para a parte superior da figura, que é a largura + a parte superior esquerda reproduz a distância da esquerda da esquerda da parte superior da esquerda, a planta da esquerda, que é a largura. 0);}#main {Position: Absolute; borda: 1px sólido #fff; Largura: 200px; Altura: 200px;}#visualização {Posição: Absolute; Largura: 600px; Altura: 319px; TOP: 200px; Esquerda: 720px;}#Visualize img { /*Para fazer a função do clipe no trabalho SetPreview, você precisa adicionar posicionamento absoluto ou posicionamento relativo ao IMG, mas como o elemento pai é um posicionamento absoluto, este é um posicionamento absoluto* / posição: absoluto;}. Mindiv {Position: Absolute; Largura: 8px; Altura: 8px; Background-color: #fff;}. Left-up {top: -4px; Esquerda: -4px; /*Alteração do mouse n-n-north w-w-west s-e-e-leste*/ cursor: nw-resize;}. /*A distância para a esquerda -4px significa mover -se para o esquerdo 4px*/ margem -esquerda: -4px; topo: -4px; cursor: n-resize;}. Right-up {direita: -4px; topo: -4px; cursor: ne-resize;}. Right-up {direita: -4px; topo: -4px; Cursor: ne-ressetize;}. Direita-down {Bottom: -4px; Direita: -4px; cursor: se-ressetize;}. Down {esquerda: 50%; margem -esquerda: -4px; Inferior: -4px; cursor: s-resize;}. esquerda {esquerda: -4px; Inferior: -4px; Cursor: Sw-Resize;}. Esquerda {Bottom: 50%; Margin -Bottom: -4px; Esquerda: -4px; cursor: w-resize;} img.js // execute após o elemento ser carregado para garantir que o elemento possa obter com êxito window.onload = function () {document.onselectStart = new function ('event.returnValue = false;'); $ ("#main"). Draggable ({contenção: 'pai', arrastar: setchoice}); var iMg = document.getElementById ("img2"); var RightDiv = document.getElementById ("Right"); var updiv = document.getElementById ("up"); Var leftDiv = document.getElementById ("esquerda"); var downDiv = document.getElementById ("Down"); var leftUpDiv = document.getElementById ("esquerda"); var retalupdiv = document.getElementById ("Right-up"); var a RightDownDiv = Document.getElementById ("Right-Down"); var leftDownDiv = document.getElementById ("esquerda para baixo"); var ma mandiv = document.getElementById ("main"); var ifKeydown = false; var contact = ""; // indica o ponto de contato pressionado // mouse para baixo estado rightdiv.onmousedown = function (e) {/* O jQuery e o jQuery-ui introduzidos pelo efeito de arrasto também desencadeará o evento de clique do mouse. Portanto, para impedir o evento de cliques que você definir e o evento de cliques que você introduziu, passe em E e adicione a seguinte instrução para evitar bolhas. A bolha significa que alguns eventos do elemento pai também serão acionados quando o mouse clicar no elemento*/ e.stopPropagation (); ifKeydown = true; contact = "Right"; } updiv.onmousedown = function (e) {e.stopPropagation (); ifKeydown = true; contact = "up"; } leftDiv.onMousedown = function (e) {e.stopPropagation (); ifKeydown = true; contact = "esquerda"; } downdiv.onMousedown = function (e) {e.stopPropagation (); ifKeydown = true; contact = "Down"; } leftupdiv.onMousedown = function (e) {e.stopPropagation (); ifKeydown = true; contact = "esquerda para cima"; } retalupdiv.onmousedown = function (e) {e.stopPropagation (); ifKeydown = true; contact = "Right-up"; } RETIRTONDOWNDIV.ONMOUSDOWN = function (e) {E.StopPropagation (); ifKeydown = true; contact = "direita para baixo"; } leftDownDiv.onMouseDown = function (e) {E.StopPropagation (); ifKeydown = true; contact = "esquerda-down"; } // Liberação do mouse Window.onMouseUp = function () {ifKeyDown = false; } // Evento do movimento do mouse window.onMouSeMove = function (e) {if (ifKeydown == true) {switch (contact) {case "right": rightmove (e); quebrar; case "up": upmove (e); quebrar; caso "esquerda": esquerda (e); quebrar; caso "Down": Downmove (e); quebrar; caso "esquerda": esquerda (e); upmove (e); quebrar; caso "Right-Up": RightMove (e); upmove (e); quebrar; caso "direito": RightMove (e); Downmove (e); quebrar; caso "esquerda para baixo": esquerda (e); Downmove (e); quebrar; }} setchoice (); setPreview (); } // mova o lado direito do rightmove (e) {var x = e.clientX; // mouse x coordenada var addWidth = ""; // A largura aumentou pela seleção da marquise após o mouse move var widthBefore = mainDiv.OffsetWidth - 2; // A largura antes da marquise muda, subtrair 2 é subtrair a largura da borda da borda, e os lados esquerdo e direito são 1px, por isso é 2 addWidth = x - getPosition (mainDiv) .Left // a largura aumentada pelo mouse se move se (largurafore <= img.width) {maindiv.st.st.st.ThLy. // a largura após a marquise muda} else {mantndiv.style.width = img.width + "px"; }} // mova função upmove (e) {var topBefore = mainDiv.offsetTop; var y = e.clienty; // coordenadas verticais do mouse var addHeight = 0; var mainy = getPosition (mantndiv) .top; // a distância da seleção de marquise até o topo da tela addHeight = y - mainy; // aumentou a altura, var altingbefore = mantnd.offsetHeight - 2; Var Bottom = topBefore + altura antes; var a altura = altura antes - addHeight; var topAfter = mantndiv.offsetTop + addHeight; if (topAfter <Bottom && topAfter> -2) {mainDiv.style.Height = heightafter + "px"; mantndiv.style.top = topAfter + "px"; }} // Mova a função esquerda LeftMove (e) {// A distância do lado esquerdo do elemento pai antes do lado esquerdo do lado esquerdo do lado esquerdo do elemento pai Var LeftBefore = mainDiv.OffSetLeft; // a distância do mouse ao lado esquerdo do navegador var x = e.clientX; // Defina o aumento da largura var addWidth = 0; // a largura da caixa de clipe antes da alteração var widthBefore = mainDiv.OffsetWidth - 2; // a distância da borda esquerda do navegador antes da alteração var mainDivleft = getPosition (mantndiv) .left; // a distância da borda direita da esquerda do elemento pai var para a direita = esquerdaforefore + widthBefore; // a largura da caixa de clipe após a alteração var widthafter = widthbe antes - addWidth; // A distância da caixa de clipe da esquerda após a alteração var de esquerdafter = mainDiv.OffSetLeft + addWidth; // impedem que a borda esquerda se mova para a área para fora da borda direita se (LeftAfter <direita && LeftAfter> -2) {// Defina a largura alterada mantndiv.style.width = widthafter + "px"; // Defina a distância do elemento pai esquerdo após a alteração mantdiv.style.left = leftafter + "px"; }} // mova a função inferior DownMove (e) {var y = e.clienty; var addHeight = 0; var a alturafore = mantndiv.offsetHeight - 2; addHeight = y - getPosition (mantndiv) .top; if (altionBefore <= img.Height) {mainDiv.style.Height = addHeight + "px"; } else {mainDiv.style.Height = img.Height + "px"; }} // Obtenha a distância do elemento em relação à esquerda da tela, use OffsetLeft // Nó como o elemento passado GetPosition (node) { /*Obtenha a margem esquerda do elemento em relação ao elemento pai* / var esquerd = node.OffSetLeft; /*Obtenha a margem superior do elemento em relação ao elemento pai*/ var top = node.offsetTop; /*Obtenha o elemento pai do elemento*/ var pai = node.offsetParent; /*Julgue se o elemento pai existe. Se houver, a margem esquerda é adicionada e a distância entre o elemento e a borda esquerda do navegador é calculada*/ while (pai! = Null) {/*loop acumula a margem esquerda do elemento filho em relação ao elemento pai*/ esquerda += parent.offsetleft; /*O loop acumula a margem superior do elemento filho em relação ao elemento pai*/ top += parent.offsettop; /*Loop obtém o elemento pai do elemento pai até que não haja elemento pai*/ parent = parent.offsetParent; } retornar {"esquerda": esquerda, "top": top}; } // Defina a área selecionada para destacar e função visível setchoice () {var top = mainDiv.offsetTop; var à direita = mantndiv.offsetleft + mantndiv.offsetWidth; var inferior = mantndiv.offsetTop + mantndiv.offsetHeight; var esquerdo = mainDiv.OffSetLeft; img.style.clip = "rect ("+top+"px,"+direita+"px,"+inferior+"px,"+esquerda+"px"+")"} // função de visualização SetPreview () {var top = mantnd.offsettop; var à direita = mantndiv.offsetleft + mantndiv.offsetWidth; var inferior = mantndiv.offsetTop + mantndiv.offsetHeight; var esquerdo = mainDiv.OffSetLeft; var iMg3 = document.getElementById ("img3"); img3.style.clip = "rect ("+ top+ "px,"+ direita+ "px,"+ inferior+ "px,"+ esquerda+ "px"+ ")" img3.style.top = -(topo)+ "px"; img3.style.left = -(esquerda) + "px"; }}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.