오늘 나는 웹 프론트 엔드의 이미지 절단 효과를 다시 배웠습니다. 그림의 특정 부분을 프레임하고 박스 부분을 미리 볼 영역이 있습니다.
렌더링은 다음과 같습니다.
매우 시원해 보이지 않습니다
구현 방법을 간단히 소개하겠습니다
1. 레이아웃은 왼쪽과 오른쪽에 두 개의 div입니다. 오른쪽에있는 것은 주로 왼쪽에 말하기 쉽습니다. 왼쪽의 하나는 절대 레이아웃에서 3 개의 레이어로 나뉩니다. 하단 층은 반투명 그림이고 중간 층은 원래 그림이지만 하나의 조각으로 만 자르고이 조각 만 표시됩니다. 클립 : rect 메소드를 사용하여 구현할 수 있습니다. 그런 다음 상단 레이어는 스스로 작성된 테두리입니다. 8 점은 테두리에 추가 되며이 8 포인트에 대해 각각 위치가 정의됩니다.
2. 그런 다음 JS 코드는 마우스 클릭 이벤트를 사용하여 구현됩니다.
아래에 나만의 코드를 게시하십시오.
index.html (우리는 두 개의 JS 파일, 즉 jQuery와 jQuery-ui를 참조해야합니다. 그 중에서도 jQuery는 온라인을 참조 할 수 있습니다. 나는 직접 jQuery-ui를 로컬로 인용했습니다. 공식 웹 사이트에서 직접 다운로드 할 수 있습니다. 인용하지 않으면 드래그 및 절단 상자를 구현할 수 없습니다).
<! docType html> <html> <head lang = "en"> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <title> 그림 절단 </title> <script src = "http://cdn.bootcss.com/jquery/2. 유형 = "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"/> <text/javascript " 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"> id = "right-up"> </div> <div id = "right-down"> </div> <div id = "right-down"> </div> <div id = "왼쪽 다운"> </div> <div id = "left"> </div> </div> <div id = "img"> <img "> </body>. img.css body {background-color : #333;} #box {위치 : 절대; 상단 : 200px; 왼쪽 : 100px; 너비 : 600px; 높이 : 319px;}#img1 { /*불투명도* / 불투명 : 0.3; 위치 : 절대; 상단 : 0; 왼쪽 : 0;}#img2 {위치 : 절대; 상단 : 0; 왼쪽 : 0; /*함수 클립 : rect (상단, 오른쪽, 하단, 왼쪽); 상단은 클립 영역 상단에서 그림 오른쪽 상단까지의 거리는 클립 영역의 오른쪽에서 그림의 왼쪽까지의 거리를 나타냅니다. 절대적인; 테두리 : 1px 고체 #fff; 너비 : 200px; 높이 : 200px;}#preview {위치 : 절대; 너비 : 600px; 높이 : 319px; 상단 : 200px; 왼쪽 : 720px;}#preview img { /*함수 setPreview 작업에서 클립 기능을 만들려면 IMG에 절대 포지셔닝 또는 상대 위치를 추가해야하지만, 부모 요소는 절대적인 위치이기 때문에 절대 포지셔닝* / 위치입니다. 너비 : 8px; 높이 : 8px; 배경색 : #fff;}. 왼쪽 {상단 : -4px; 왼쪽 : -4px; /*Mouse change n-n-north w-w-west s-south e-east*/ cursor: nw-resize;}.up { /*The distance to the left of the parent element whose closest position is absolute or relative is 50% of the distance to the left of the parent element whose closest position is absolute or relative is 50%*/ left: 50%; /*왼쪽 -4px까지의 거리는 왼쪽 4px로 이동하는 것을 의미합니다.*/ margin -left : -4px; 상단 : -4px; 커서 : n- 레드 사이즈;}. 오른쪽 {오른쪽 : -4px; 상단 : -4px; 커서 : ne-Resize;}. 오른쪽 {오른쪽 : -4px; 상단 : -4px; 커서 : ne-Resize;}. 오른쪽 다운 {하단 : -4px; 오른쪽 : -4px; 커서 : se-reesize;}. 다운 {왼쪽 : 50%; 마진 왼쪽 : -4px; 하단 : -4px; 커서 : s- 레드 사이즈;}. 왼쪽 {왼쪽 : -4px; 하단 : -4px; 커서 : SW-Resize;}. 왼쪽 {하단 : 50%; 마진 바닥 : -4px; 왼쪽 : -4px; Cursor : w-Resize;} img.js // 요소가 Window.onload = function () {document.onselectStart = new function ( 'event.ReturnValue = false;')을 성공적으로 얻을 수 있도록 요소가로드 된 후 실행됩니다. $ ( "#main"). draggable ({confentment : 'parent', drag : setchoice}); var img = document.getElementById ( "img2"); var rightdiv = document.getElementById ( "오른쪽"); var updiv = document.getElementById ( "up"); var leftdiv = document.getElementById ( "왼쪽"); var downdiv = document.getElementById ( "down"); var leftupdiv = document.getElementById ( "왼쪽"); var rightupdiv = document.getElementById ( "권리 업"); var right downdiv = document.getElementById ( "Right-Down"); var leftdowndiv = document.getElementById ( "왼쪽"); var maindiv = document.getElementById ( "main"); var ifkeydown = false; var contact = ""; // 눌린 연락처를 나타냅니다. // mouse down state rightdiv.onmousedown = function (e) {/* 드래그 효과로 도입 된 jQuery 및 jQuery-UI는 마우스 클릭 이벤트를 트리거합니다. 따라서 정의하는 클릭 이벤트와 도입 된 클릭 이벤트를 방지하려면 E를 통과하고 다음 명령문을 추가하여 거품을 방지하십시오. 버블은 마우스가 요소*/ e.StopPropagation ()을 클릭 할 때 부모 요소의 일부 이벤트가 트리거 될 것임을 의미합니다. ifkeydown = true; contact = "오른쪽"; } updiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "up"; } leftDiv.onMousEdown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "왼쪽"; } downdiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "down"; } leftupdiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "왼쪽"; } rightupdiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; Contact = "Right-Up"; } rightDownDiv.onMousEdown = function (e) {e.StopPropagation (); ifkeydown = true; Contact = "Right Down"; } leftdowndiv.onmousedown = function (e) {e.StopPropagation (); ifkeydown = true; contact = "왼쪽 줄"; } // 마우스 릴리스 상태 Window.onMouseUp = function () {ifkeydown = false; } // 마우스 이동 이벤트 window.onmouseMove = function (e) {if (ifkeydown == true) {switch (contact) {case "right": RightMove (e); 부서지다; 사례 "UP": Upmove (e); 부서지다; 사례 "왼쪽": LeftMove (E); 부서지다; 사례 "다운": 다운 커브 (E); 부서지다; 사례 "왼쪽": LeftMove (E); 상향 (E); 부서지다; 사례 "권리 업": RightMove (e); 상향 (E); 부서지다; 사례 "권리 다운": RightMove (e); 다운 운행 (e); 부서지다; 사례 "왼쪽": LeftMove (e); 다운 운행 (e); 부서지다; }} setchoice (); setPreview (); } // 오른쪽 오른쪽으로 이동 (e) {var x = e.clientx; // 마우스 x 좌표 var addWidth = ""; // 마우스가 var widthbefore = maindiv.offsetWidth -2를 이동 한 후 천막을 선택함으로써 너비가 증가했습니다. // 천막이 바뀌기 전의 너비는 2를 빼기 2 국경 경계의 너비를 빼는 것이고 왼쪽과 오른쪽은 1px이므로 2 addWidth = X -getPosition (mainDiv) .left // 마우스가 (widthbefore <= = Img.width) {maindiv.style.width = addwidth + "px"; // 천막이 변경된 후 너비} else {maindiv.style.width = img.width + "px"; }} // move function upmove (e) {var topbefore = mainDiv.OffSetTop; var y = e.clienty; // 마우스 수직 좌표 var addHeight = 0; var mainy = getPosition (maindiv) .top; // 선택 마키의 거리는 화면 상단 addHeight = y -mainy; // 높이 증가, var heightbefore = maindiv.offsetheight -2; var bottom = topbefore + heightbefore; var heightafter = heightbefore -addHeight; var topafter = maindiv.offsettop + addHeight; if (topAfter <bottom && topafter> -2) {maindiv.style.height = areightafter + "px"; maindiv.style.top = topafter + "px"; }} // 왼쪽 함수를 왼쪽 함수로 이동 왼쪽 move (e) {// 부모 요소의 왼쪽 왼쪽 왼쪽의 왼쪽에서 부모 요소의 왼쪽에서 왼쪽 왼쪽 왼쪽 leftbefore = maindiv.offsetleft; // 마우스에서 브라우저의 왼쪽까지의 거리는 var x = e.clientx; // 증가 된 너비 정의 var addwidth = 0; // 변경 전 클립 상자의 너비는 var widthbefore = maindiv.offsetWidth -2; // 변경 전에 브라우저에서 왼쪽 테두리의 거리는 var maindivleft = getPosition (mainDiv) .left; // 상위 요소의 왼쪽에서 오른쪽 테두리의 거리는 var right = leftbefore + 너비; // 변경 후 클립 상자의 너비 var widthafter = widthbefore -addwidth; // 변경 후 왼쪽에서 클립 상자의 거리 var leftafter = mainDiv.OffSetLeft + addWidth; // 왼쪽 테두리가 오른쪽 테두리 외부의 영역으로 이동하는 것을 방지합니다. // 변경 후 왼쪽 상위 요소로부터의 거리를 정의한다. mainDiv.style.left = leftAfter + "px"; }} // 하부 함수 다운 커브 (e) {var y = e.clienty; var addHeight = 0; var heightbefore = maindiv.offsetheight -2; addHeight = y -getPosition (maindiv) .top; if (heightbefore <= img.height) {maindiv.style.height = addHeight + "px"; } else {maindiv.style.height = img.height + "px"; }} // 화면 왼쪽에 대한 요소의 거리를 가져 오면 전달 된 요소 함수 getPosition (node) { /*부모 요소에 대한 요소의 왼쪽 여백을 가져옵니다. / var left = node.OffSetLeft; /*부모 요소에 대한 요소의 상한 마진을 가져옵니다*/ var top = node.offsetTop; /*요소의 부모 요소를 가져옵니다*/ var parent = node.offsetparent; /*부모 요소가 존재하는지 판단합니다. 왼쪽 여백이 추가되고 브라우저의 요소와 왼쪽 테두리 사이의 거리가 계산됩니다*/ while (parent! = null) {/*루프는 부모 요소*/ left += parent.for.for.for.for.for.for.for.for.forsetleft; /*루프는 부모 요소*/ top += parent.OffSetTop에 대한 자식 요소의 상단 마진을 축적합니다. /*루프는 부모 요소가 없을 때까지 부모 요소의 부모 요소를 얻습니다.*/ parent = parent.offsetparent; } return { "왼쪽": 왼쪽, "상단": 상단}; } // 선택한 영역을 강조 및 가시 함수로 설정하십시오. setChoice () {var top = mainDiv.OffSetTop; var right = maindiv.offsetleft + maindiv.offsetWidth; var bottom = maindiv.offsetTop + mainDiv.offSetheight; var left = maindiv.offsetleft; img.style.clip = "rect ("+top+"px,"+right+"px", "+bottom+"px, "+left+"px "+") "} // 미리보기 함수 setpreview () {var top = mainDiv.OffSetTop; var right = 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,"+ right+ "px", "+ bottom+"px, "+ left+"px "+") "img3.style.top = -(상단)+"px "; img3.style.left = -(왼쪽) + "px"; }}위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.