บทความนี้อธิบายวิธีการของ JS เพื่อให้ได้การขยายตัวในท้องถิ่นหรือลดภาพ แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> <title> ความสูง: 696px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 100px; ซ้าย: 250px; ขนาดตัวอักษร: 0; ชายแดน: 1px Solid #000;} #img {width: 500px; ความสูง: 696px;} #เบราว์เซอร์ {ชายแดน: 1px Solid #000; z-index: 100; ตำแหน่ง: สัมบูรณ์; พื้นหลัง:#555;}#mag {border: 1px solid#000; ล้น: ซ่อน; z-index: 100;} </style> <script type = "text/javascript"> ฟังก์ชั่น getEventObject (w3cevent) {// เหตุการณ์ปกติฟังก์ชั่นกลับมาทำงาน w3cevent || window.event;} ฟังก์ชั่น getPointerposition (e) {// รับฟังก์ชัน e = e || getEventObject (e); var x = e.pagex || (e.clientx + (document.documentelement.scrollleft || document.body.scrollleft)); var y = e.pagey || (e.clienty + (document.documentelement.scrolltop || document.body.scrolltop)); return {'x': x, 'y': y};} ฟังก์ชั่น setOpacity (elem, ระดับ) {// การตั้งค่าเบราว์เซอร์ที่เข้ากันได้สำหรับค่าโปร่งใสถ้า (elem.filters) {elem.style.filter = 'alpha (opacity =' + ระดับ * 100 + ')'; } else {elem.style.Opacity = ระดับ; }} ฟังก์ชั่น css (elem, prop) {// ฟังก์ชั่นการตั้งค่า CSS สามารถตั้งค่า CSS ได้อย่างง่ายดายและเข้ากันได้กับค่าโปร่งใสสำหรับ (var i ใน prop) {ถ้า (i == 'opacity') {setOpacity (elem, prop [i]); } else {elem.style [i] = prop [i]; }} return elem;} var magnifier = {m: null, init: function (magni) {var m = this.m = magni || {cont: null, // div img โหลดภาพต้นฉบับ img: null, // scale mag: null, // สเกลเฟรมสเกล: 15 // ค่าสเกล, ยิ่งค่าชุดที่ใหญ่ขึ้น, การขยายขนาดใหญ่ขึ้น แต่มีปัญหาที่นี่หากไม่สามารถหารได้ขอบสีขาวขนาดเล็กบางส่วนจะถูกสร้างขึ้น ฉันไม่รู้วิธีแก้ปัญหาในขณะนี้} css (m.img, {'ตำแหน่ง': 'Absolute', 'Width': (M.Cont.ClientWidth * M.Scale) + 'PX', // ความกว้าง * ค่าของภาพต้นฉบับ 'M.CONTHEMS 'Display': 'None', 'Width': M.Cont.ClientWidth + 'Px', //m.cont เป็นภาพต้นฉบับซึ่งมีความกว้างเท่ากับภาพต้นฉบับ 'Height': M.Cont.ClientHeight + 'PX', 'position' กล่องขยายอยู่ทางด้านขวาของภาพต้นฉบับ 10px 'top': m.cont.offsettop + 'px'}) var borderwid = m.cont.getElementByTagname ('div') [0] // รับความกว้างของเส้นขอบ CSS (m.cont.getElementsByTagname ('div') [0], {//m.cont.getElementsByTagname('Div') [0] คือกล่องการท่องเว็บ 'การแสดงผลของ/////// 'ความสูง': m.cont.clientheight /m.scale - borderwid + 'px', // ค่าความสูง /สเกลของภาพต้นฉบับ - ความกว้างของเส้นขอบ 'ความทึบ': 0.5 // ตั้งค่าความโปร่งใส}) // ให้ค่า SRC ของภาพต้นฉบับให้ภาพขยาย m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start; }, start: function (e) {ถ้า (document.all) {// ดำเนินการภายใต้ IE เท่านั้นส่วนใหญ่เพื่อหลีกเลี่ยงการไม่สามารถเขียนทับ Magnifier.createiframe (magnifier.m.img); } this.onmousemove = magnifier.move; // สิ่งนี้ชี้ไปที่ m.cont this.onmouseout = magnifier.end; }, ย้าย: ฟังก์ชั่น (e) {var pos = getPointerposition (e); // เหตุการณ์มาตรฐาน this.getElementsByTagname ('div') [0] .style.display = ''; CSS (this.getElementsByTagname ('div') [0], {'top': math.min (math.max (pos.y - this.offsettop - parseint (this.getElementsByTagname ('div') [0] .style.height) / 2,0) 'px', 'ซ้าย': math.min (math.max (pos.x - this.offsetleft - parseint (this.getElementsByTagname ('div') [0] .style.width) /2,0), this.clientwidth เรียกดูความกว้างของกล่อง/2, math.max และ math.min เพื่อให้กล่องเรียกดูจะไม่เกินภาพ}) magnifier.m.mag.style.display = ''; css (magnifier.m.img, {'top': - (parseint (this.getElementByTagname ('div') [0] .style.top) * Magnifier.m.scale) + 'px', 'ซ้าย': - (parseint) }, end: function (e) {this.getElementsByTagname ('div') [0] .style.display = 'ไม่มี'; Magnifier.removeiframe (magnifier.m.img); // ทำลาย iframe magnifier.m.mag.style.display = 'ไม่มี'; }, createiframe: ฟังก์ชัน (elem) {var layer = document.createElement ('iframe'); layer.tabindex = '-1'; layer.src = 'JavaScript: false;'; elem.parentNode.AppendChild (เลเยอร์); layer.style.width = elem.offsetWidth + 'px'; layer.style.height = elem.offsetheight + 'px'; }, removeIframe: ฟังก์ชั่น (elem) {var layers = elem.parentNode.getElementByTagname ('iframe'); ในขณะที่ (layers.length> 0) {เลเยอร์ [0] .parentNode.removeChild (เลเยอร์ [0]); }}} window.onload = function () {magnifier.init ({cont: document.getElementById ('magnifier'), img: document.getElementById ('magnifierimg'), mag: document.getElementById ( src = "lib/images/1.jpg" id = "img"/> <div id = "เบราว์เซอร์"> </div> </div> <div id = "mag"> <img id = "magnifierimg"/> </div> <select style = "Absolute; เขียนทับ </potion> </select> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน