ฉันตื่นเต้นเล็กน้อยเมื่อฉันโพสต์บล็อกเป็นครั้งแรก ตอนนี้ฉันอยู่ในเทียนจิน ฉันหวังว่าจะได้ทำงานในอุตสาหกรรมส่วนหน้าในอนาคตและฉันจะไม่สามารถเรียนได้เป็นเวลานาน เพื่อบันทึกกระบวนการเรียนรู้และผลกำไรของฉันแน่นอนว่าฉันเป็นการรวมตัวกัน สิ่งที่ฉันเขียนอาจไม่สูงเท่าวัวขนาดใหญ่ แต่พวกเขาเป็นเพียงเนื้อหาพื้นฐาน แน่นอนฉันจะรวบรวมบทความดีๆที่ฉันคิดว่าดี (จริง ๆ แล้วฉันเข้าใจได้มากที่สุด ... ) ฉันเชื่อว่าฉันสามารถเขียนบางสิ่งบางอย่างระดับสูงในอนาคต มาเร็ว!
ฉันพูดเรื่องไร้สาระเล็กน้อยพูดคุยเกี่ยวกับเรื่องจริงจัง ไม่กี่วันที่ผ่านมาฉันดูวิดีโอการสอนของการศึกษาของ Tanzhou ครูใช้ jQuery เพื่อให้ได้ผลของแว่นขยาย (ครูบอกว่ามันช้าเกินไปและเขาก็กระโดดไปรอบ ๆ และดูมัน) เนื่องจากฉันไม่ได้เรียนรู้ jQuery ดี แต่รหัสพื้นฐานยังคงเป็นที่เข้าใจได้ฉันต้องการฝึกฝนกับ JS ที่ฉันกำลังเรียนรู้อยู่และในที่สุดก็ประสบความสำเร็จในการบรรลุผลนี้
แนวคิด: ก่อนอื่นให้บล็อกย้ายและบล็อก BIMG ซ่อน เมื่อเมาส์เคลื่อนที่ไปที่กล่องบล็อกย้ายและบล็อก BIMG จะปรากฏขึ้นและตำแหน่งปัจจุบันของเมาส์จะได้รับ จากนั้นหลังจากการคำนวณค่าที่เหมาะสมสำหรับบล็อกการย้ายและบล็อก BIMG จะได้รับเพื่อให้ได้เอฟเฟกต์แว่นขยาย (การคำนวณตำแหน่งของบล็อกย้ายและบล็อก BIMG จะมีรายละเอียดในภายหลัง)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แว่นขยาย </title> <link href = "css/bigimg.css" rel = "stylesheet"/> <script src = "js/bigimg.js"> <div id = "box"> <img src = "images/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "images/bimg.jpg"> </div>
สไตล์ CSS:
*{มาร์จิ้น: 0px; Padding: 0px;}#box {width: 430px; ความสูง: 430px; มาร์จิ้น: 100px; ขอบซ้าย: 17%; ตำแหน่ง: สัมพัทธ์; // ใช้การวางตำแหน่งสัมพัทธ์ที่นี่เพื่อให้องค์ประกอบอื่น ๆ สามารถพึ่งพาองค์ประกอบนี้เพื่อตำแหน่ง} #move {background-image: url (../ images/move.png); ความกว้าง: 220px; ความสูง: 220px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0px; ด้านบน: 0px; จอแสดงผล: ไม่มี; // ปล่อยให้มันซ่อนก่อนและใช้ JS เพื่อแสดง} #bimg {width: 430px; ความสูง: 430px; ล้น: ซ่อน; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 450px; จอแสดงผล: ไม่มี; // ปล่อยให้มันซ่อนก่อนและใช้ js เพื่อแสดง} #bimg img {width: 800px; ความสูง: 800px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ซ้าย: 0px;}JavaScript:
ฟังก์ชั่น bigimg () {var bbox = document.getElementById ("box"); var bmove = document.getElementById ("ย้าย"); var bbimg = document.getElementById ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onmouseover = function () {// ย้ายเมาส์ไปที่กล่องเพื่อแสดงรูปภาพขนาดใหญ่และเลือกกล่อง bbimg.style.display = "block"; bmove.style.display = "block"; } bbox.onmouseout = function () {// mousemove ไม่แสดงภาพขนาดใหญ่และกล่องกาเครื่องหมายเมื่อกล่องถูกย้ายออกจากเมาส์ bbimg.style.display = "ไม่มี"; bmove.style.display = "ไม่มี"; } bbox.onmousemove = function (e) {// รับตำแหน่งเมาส์ var x = e.clientx; // ตำแหน่งของเมาส์ที่สัมพันธ์กับ viewport var y = e.clienty; var t = bbox.offsettop; // ตำแหน่งของกล่องที่สัมพันธ์กับ viewport var l = bbox.offsetleft; var _left = x - l - bmove.offsetWidth/2; // คำนวณตำแหน่งของการย้าย var _top = y - t -bmove.offsetheight/2; ถ้า (_top <= 0) // เลื่อนไปที่ด้านบนของ box_top = 0; อื่นถ้า (_top> = bbox.offsetheight-bmove.offsetheight) // เลื่อนไปที่ด้านล่างของ box_top = bbox.offsetheight-bmove.offsetheight; ถ้า (_left <= 0) // เลื่อนไปทางซ้ายสุดของ box_left = 0; อื่นถ้า (_left> = bbox.offsetWidth-bmove.offsetWidth) // เลื่อนไปทางขวาสุดของ box_left = bbox.offsetWidth-bmove.offsetWidth; bmove.style.top = _top + "px"; // ตั้งค่าตำแหน่งของการย้าย bmove.style.left = _left + "px"; var w = _left/(bbox.offsetwidth-bmove.offsetWidth); // คำนวณอัตราส่วนการเคลื่อนไหว var h = _top/(bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // คำนวณตำแหน่งของภาพขนาดใหญ่ var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w; b_bimg.style.top = -b_bimg_top + "px"; // ตั้งค่าข้อมูลตำแหน่งของภาพขนาดใหญ่ b_bimg.style.left = -b_bimg_left + "px"; -ภาพการทำซ้ำ:
1. การคำนวณบล็อกย้าย
ลูกศรสีดำ:
var x = e.clientx; // ตำแหน่งของเมาส์ที่สัมพันธ์กับ viewport var y = e.clienty;
ลูกศรสีแดง:
var t = bbox.offsettop; // ตำแหน่งของกล่องที่สัมพันธ์กับ viewport var l = bbox.offsetleft;
ลูกศรสีส้ม:
var _left = x - l - bmove.offsetWidth/2; // คำนวณตำแหน่งของการย้าย var _top = y - t -bmove.offsetheight/2;
2. การคำนวณบล็อก BIMG
ใช้มาตราส่วนของบล็อกการย้ายภายในช่วงที่เคลื่อนย้ายได้เพื่อตั้งค่าตำแหน่งของภาพขนาดใหญ่
ย้ายช่วงของการย้ายบล็อก:
bbox.offsetWidth-bmove.offsetWidth
พิกัดปัจจุบันของบัญชี Move Block สำหรับช่วงที่เคลื่อนย้ายได้:
var w = _left/(bbox.offsetwidth-bmove.offsetWidth); // คำนวณอัตราส่วนการเคลื่อนไหว var h = _top/(bbox.offsetheight-bmove.offsetheight);
ช่วงการเคลื่อนไหวของ Bimg:
b_bimg.offsetheight-bbimg.offsetheight
ตำแหน่งของ Bimg:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // คำนวณตำแหน่งของภาพขนาดใหญ่ var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w;
ตัวอย่างง่ายๆข้างต้นของการใช้ JS เพื่อให้ได้ผลของแว่นขยายคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น