วันนี้ฉันได้เรียนรู้เอฟเฟกต์การตัดภาพของเว็บส่วนหน้าอีกครั้ง มีพื้นที่สำหรับกรอบส่วนหนึ่งของรูปภาพและดูตัวอย่างส่วนที่บรรจุอยู่ในกล่อง
การเรนเดอร์มีดังนี้:
มันดูไม่เท่มากนัก
มาแนะนำวิธีการดำเนินการสั้น ๆ
1. เค้าโครงเป็นสอง divs ทางซ้ายและขวา ทางด้านขวานั้นง่ายต่อการพูดส่วนใหญ่อยู่ทางซ้าย ด้านซ้ายถูกแบ่งออกเป็นสามชั้นในรูปแบบสัมบูรณ์ ชั้นล่างเป็นภาพโปร่งแสงและชั้นกลางเป็นภาพต้นฉบับ แต่มันถูกตัดเป็นชิ้นเดียวและชิ้นส่วนนี้จะปรากฏขึ้นเท่านั้น คุณสามารถใช้วิธีคลิป: 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> 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"/> src = "img.js"> </script> </head> <body> <div id = "box"> <img src = "images/1.jpg" id = "img1"> <img src = "images/1.jpg" id = "img2"> id = "right-up"> </div> <div id = "ขวาลง"> </div> <div id = "ขวาลง"> </div> <div id = "ซ้าย-ลง"> </div> <div id = "left"> </div> </div> </div> </div> </body> </html> img.css body {พื้นหลังสี: #333;} #box {ตำแหน่ง: สัมบูรณ์; ด้านบน: 200px; ซ้าย: 100px; ความกว้าง: 600px; ความสูง: 319px;}#img1 { /*ความทึบ* / ความทึบ: 0.3; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0;}#img2 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; /*คลิปฟังก์ชั่น: rect (บน, ขวา, ด้านล่าง, ซ้าย); ด้านบนแสดงถึงระยะห่างจากด้านบนของพื้นที่คลิปไปด้านบนของภาพขวาแสดงถึงระยะทางจากด้านขวาของพื้นที่คลิปทางด้านซ้ายของภาพนั่นคือความยาว + ด้านล่างซ้ายแสดงระยะห่างจากด้านล่างของพื้นที่คลิปไปด้านบนของภาพ {ตำแหน่ง: สัมบูรณ์; ชายแดน: 1px Solid #FFF; ความกว้าง: 200px; ความสูง: 200px;}#ดูตัวอย่าง {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 600px; ความสูง: 319px; ด้านบน: 200px; ซ้าย: 720px;}#ดูตัวอย่าง img { /*ในการทำฟังก์ชั่นคลิปในฟังก์ชั่น setPreview ทำงานคุณต้องเพิ่มตำแหน่งสัมบูรณ์หรือการวางตำแหน่งสัมพัทธ์กับ IMG แต่เนื่องจากองค์ประกอบหลักคือการวางตำแหน่งแบบสัมบูรณ์ ความกว้าง: 8px; ความสูง: 8px; พื้นหลังสี: #FFF;}. ซ้าย {TOP: -4PX; ซ้าย: -4px; /*การเปลี่ยนเมาส์ N-N-North W-W-WEST S-SOUTH E-EAST*/ CURSOR: NW-RESIZE;}. ขึ้น {/*ระยะทางไปทางซ้ายขององค์ประกอบหลักที่ตำแหน่งใกล้เคียงที่สุดหรือสัมพัทธ์คือ 50%ของระยะทางด้านซ้ายขององค์ประกอบหลัก /*ระยะทางไปทางซ้าย -4px หมายถึงการย้ายไปทางซ้าย 4px*/ margin -left: -4px; ด้านบน: -4px; เคอร์เซอร์: n-resize;}. ขวา-ขึ้น {ขวา: -4px; ด้านบน: -4px; เคอร์เซอร์: ne-resize;}. ขวา-ขึ้น {ขวา: -4px; ด้านบน: -4px; เคอร์เซอร์: ne-resize;}. ขวาลง {ด้านล่าง: -4px; ขวา: -4px; เคอร์เซอร์: se-resize;}. ลง {ซ้าย: 50%; ขอบซ้าย: -4px; ด้านล่าง: -4px; เคอร์เซอร์: S-Resize;}. ซ้ายลง {ซ้าย: -4px; ด้านล่าง: -4px; เคอร์เซอร์: SW-Resize;}. ซ้าย {ด้านล่าง: 50%; มาร์จิ้น -ก้น: -4px; ซ้าย: -4px; เคอร์เซอร์: w-resize;} img.js // ดำเนินการหลังจากโหลดองค์ประกอบเพื่อให้แน่ใจว่าองค์ประกอบสามารถรับ window.onload = function () {document.onselectStart = ฟังก์ชั่นใหม่ได้สำเร็จ ('event.returnvalue = false;'); $ ("#main"). draggable ({containment: '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 ("ลง"); var leftUpdiv = document.getElementById ("ซ้าย"); var rightUpdiv = document.getElementById ("Right-Up"); var rightdowndiv = document.getElementById ("ขวาลง"); var leftdowndiv = document.getElementById ("ซ้ายลง"); var maindiv = document.getElementById ("หลัก"); var ifkeydown = false; var contact = ""; // ระบุจุดสัมผัสที่กด // เมาส์ลง state rightdiv.onmousedown = function (e) {/* jQuery และ jQuery-ui ที่แนะนำโดยเอฟเฟกต์การลากจะทำให้เกิดเหตุการณ์การคลิกเมาส์ ดังนั้นเพื่อป้องกันไม่ให้เกิดเหตุการณ์คลิกที่คุณกำหนดและเหตุการณ์คลิกที่คุณแนะนำให้ส่งผ่าน E และเพิ่มคำสั่งต่อไปนี้เพื่อป้องกันฟองอากาศ Bubble หมายความว่าเหตุการณ์บางอย่างขององค์ประกอบหลักจะถูกเรียกใช้เมื่อเมาส์คลิกที่องค์ประกอบ*/ e.stoppropagation (); ifkeydown = true; ติดต่อ = "ถูกต้อง"; } updiv.onmousedOwn = function (e) {E.StopPropagation (); ifkeydown = true; ติดต่อ = "ขึ้น"; } leftDiv.onMousedOwn = function (e) {E.StopPropagation (); ifkeydown = true; ติดต่อ = "ซ้าย"; } downdiv.onmousedown = function (e) {E.StopPropagation (); ifkeydown = true; ติดต่อ = "ลง"; } leftUpdiv.onmousedown = function (e) {E.StopPropagation (); ifkeydown = true; ติดต่อ = "ซ้าย"; } rightUpdiv.onmousedown = function (e) {E.StopPropagation (); ifkeydown = true; contact = "Right-Up"; } RightDownDiv.onMousedOwn = function (e) {E.StopPropagation (); ifkeydown = true; ติดต่อ = "ขวาลง"; } leftdowndiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; ติดต่อ = "ซ้ายลง"; } // mouse release สถานะ window.onmouseup = function () {ifkeydown = false; } // Mouse Movement Event Window.onmousemove = function (e) {ถ้า (ifkeydown == true) {switch (ติดต่อ) {กรณี "ขวา": Rightmove (e); หยุดพัก; กรณี "UP": Upmove (E); หยุดพัก; กรณี "ซ้าย": leftmove (e); หยุดพัก; กรณี "ลง": downmove (e); หยุดพัก; กรณี "ซ้าย": leftmove (e); upmove (e); หยุดพัก; กรณี "ขวา-ขึ้น": Rightmove (e); upmove (e); หยุดพัก; กรณี "ขวาลง": Rightmove (e); downmove (e); หยุดพัก; กรณี "ซ้าย-ลง": leftmove (e); downmove (e); หยุดพัก; }} setChoice (); SetPreview (); } // เลื่อนด้านขวาขวา (e) {var x = e.clientx; // เมาส์ x พิกัด var addwidth = ""; // ความกว้างเพิ่มขึ้นโดยการเลือกปะรำหลังจากเมาส์เคลื่อนที่ var widthfefore = maindiv.offsetWidth - 2; // ความกว้างก่อนที่จะเปลี่ยนปะทะการลบ 2 คือการลบความกว้างของเส้นขอบและด้านซ้ายและขวาเป็น 1px ดังนั้นจึงเป็น 2 addwidth = x - getPosition (maindiv) .left // ความกว้างเพิ่มขึ้นโดยการเคลื่อนที่ของเมาส์ // ความกว้างหลังจากการเปลี่ยนแปลงของ Marquee} else {maindiv.style.width = img.width + "px"; }} // การย้ายฟังก์ชั่น upmove (e) {var topbefore = maindiv.offsettop; var y = e.clienty; // เมาส์พิกัดแนวตั้ง var addheight = 0; var mainy = getPosition (maindiv) .top; // ระยะทางของการเลือกกระโจมที่ด้านบนของหน้าจอ addheight = y - mainy; // เพิ่มความสูงเพิ่มความสูง var = maindiv.offsetheight - 2; var bottom = topbefore + ความสูงก่อน; var heightafter = ความสูงก่อน - addheight; var topafter = maindiv.offsettop + addheight; if (topafter <bottom && topafter> -2) {maindiv.style.height = heightafter + "px"; maindiv.style.top = topafter + "px"; }} // ย้ายฟังก์ชั่นซ้ายซ้าย (e) {// ระยะทางจากด้านซ้ายขององค์ประกอบหลักก่อนที่ด้านซ้ายของด้านซ้ายของด้านซ้ายขององค์ประกอบหลัก var ซ้ายก่อน = maindiv.offsetleft; // ระยะทางจากเมาส์ไปทางด้านซ้ายของเบราว์เซอร์ var x = e.clientx; // กำหนดความกว้างที่เพิ่มขึ้น var addwidth = 0; // ความกว้างของกล่องคลิปก่อนเปลี่ยน var widthbefore = maindiv.offsetWidth - 2; // ระยะทางของเส้นขอบด้านซ้ายจากเบราว์เซอร์ก่อนที่จะเปลี่ยน var maindivleft = getPosition (maindiv) .left; // ระยะทางของเส้นขอบด้านขวาจากด้านซ้ายขององค์ประกอบหลัก var ขวา = ซ้ายก่อนหน้า + widthfefore; // ความกว้างของกล่องคลิปหลังจากเปลี่ยน var widthafter = widthBefore - addWidth; // ระยะทางของกล่องคลิปจากด้านซ้ายหลังจากเปลี่ยน var leftafter = maindiv.offsetleft + addwidth; // ป้องกันไม่ให้เส้นขอบด้านซ้ายย้ายไปยังพื้นที่ด้านนอกชายแดนด้านขวาถ้า (ซ้าย -ด้านซ้าย <ขวา && ซ้าย -หลัง> -2) {// กำหนดความกว้างที่เปลี่ยนแปลง maindiv.style.width = widthafter + "px"; // กำหนดระยะห่างจากองค์ประกอบหลักด้านซ้ายหลังจากการเปลี่ยนแปลง maindiv.style.left = ซ้ายหลัง + "px"; }} // ย้ายฟังก์ชันล่าง downmove (e) {var y = e.clienty; var addHeight = 0; var heightbefore = maindiv.offsetheight - 2; addHeight = y - getPosition (maindiv) .top; if (ความสูงก่อน <= img.height) {maindiv.style.height = addheight + "px"; } else {maindiv.style.height = img.height + "px"; }} // รับระยะทางขององค์ประกอบที่สัมพันธ์กับด้านซ้ายของหน้าจอให้ใช้ Offsetleft // Node เป็นฟังก์ชั่นองค์ประกอบที่ส่งผ่าน (โหนด) { /*รับขอบซ้ายขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลัก* / var ซ้าย = node.offsetleft; /*รับขอบบนขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลัก*/ var top = node.offSettop; /*รับองค์ประกอบหลักขององค์ประกอบ*/ var parent = node.offsetParent; /*ตัดสินว่าองค์ประกอบหลักมีอยู่หรือไม่ หากมีการเพิ่มระยะขอบซ้ายและระยะห่างระหว่างองค์ประกอบและเส้นขอบด้านซ้ายของเบราว์เซอร์จะถูกคำนวณ*/ ในขณะที่ (parent! = null) {/*ลูปสะสมระยะขอบซ้ายขององค์ประกอบลูกเทียบกับองค์ประกอบหลัก*/ ซ้าย += parent.offsetleft; /*ลูปสะสมขอบด้านบนขององค์ประกอบลูกที่สัมพันธ์กับองค์ประกอบหลัก*/ top += parent.offSettop; /*ลูปได้รับองค์ประกอบหลักขององค์ประกอบหลักจนกว่าจะไม่มีองค์ประกอบหลัก*/ parent = parent.offsetParent; } return {"left": ซ้าย, "top": top}; } // ตั้งค่าพื้นที่ที่เลือกเพื่อเน้นและฟังก์ชั่นที่มองเห็นได้ 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,"+ขวา+"px,"+bottom+"px,"+ซ้าย+"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,"+ ขวา+ "px,"+ bottom+ "px,"+ ซ้าย+ "px"+ ")" img3.style.top = -(บน)+ "px"; img3.style.left = -(ซ้าย) + "px"; -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น