Artikel ini menjelaskan metode JS untuk mencapai pembesaran lokal atau pengurangan gambar. Bagikan untuk referensi Anda, sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <title> magnifier </title> <style type = "text/csss" css "#> <titlefier </title </title <style type =" text/css "# Tinggi: 696px; Posisi: Absolute; Atas: 100px; Kiri: 250px; Ukuran font: 0; BORDER: 1PX SOLID #000;} #img {width: 500px; Tinggi: 696px;} #browser {border: 1px solid #000; z-index: 100; Posisi: Absolute; Latar belakang:#555;}#mag {border: 1px solid#000; meluap: tersembunyi; z-index: 100;} </style> <script type = "text/javascript"> function getEventObject (w3cevent) {// acara dinormalisasi fungsi kembali w3cevent || window.event;} function getPoInterposition (e) {// Dapatkan fungsi 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};} function setopacity (elem, level) {// pengaturan browser yang kompatibel untuk nilai transparan jika (elem.filters) {elem.style.filter = 'alpha (opacity =' + level * 100 + ')'); } else {elem.style.opacity = level; }} fungsi css (elem, prop) {// fungsi pengaturan css dapat dengan mudah mengatur nilai css dan kompatibel dengan nilai transparan untuk (var i di prop) {if (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 memuat gambar asli img: null, // skala mag: null, // skala bingkai skala: 15 // nilai skala, semakin besar nilai set, semakin besar pembesaran, tetapi ada masalah di sini bahwa jika tidak dapat dibagi, beberapa tepi putih kecil akan dihasilkan. Saya tidak tahu cara menyelesaikannya pada saat ini} css (m.img, {'position': 'absolute', 'width': (m.cont.clientwidth * m.scale) + 'px', // nilai skala gambar asli 'px': m.cont.clientheight * m.scale) + 'px' px ' css (m.mag, {'display': 'none', 'width': m.cont.clientwidth + 'px', //m.cont adalah gambar asli, yang merupakan lebar yang sama dengan gambar asli.'Height ': m.cont.clientHeight +' px ',' posisi ':' absolute ',' left ': m.cont. 'px', // Posisi kotak pembesaran jauh di sebelah kanan gambar asli 10px 'atas': m.cont.offsettop + 'px'}) var borderwid = m.cont.getElementsbyTagname ('div') [0] .offsetWidth - m.cont.getElementsbyTagname ('div') [0] .ofssetWidth - m.cont.getElementsbyTagname ('div') [0]. // Dapatkan lebar perbatasan CSS (m.cont.geteLementsbyTagname ('Div') [0], {//m.cont.getElementsbytagname('div')) adalah kotak penjelajahan 'None -None', // Pengaturan ', m.cont.clientwidth/m.scale -borderwid +' perbatasan + 'perbatasan +' perbatasan + 'boorden', m.cont.client. 'Tinggi': m.cont.clientHeight /m.scale - borderwid + 'px', // nilai tinggi /skala dari gambar asli - lebar perbatasan 'opacity': 0.5 // atur transparansi}) m.img.src = m.cont.getElementsbyTagname ('img') [0] .src; // Biarkan nilai SRC dari gambar asli untuk memperbesar gambar m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start; }, start: function (e) {if (document.all) {// hanya mengeksekusi di bawah IE, terutama untuk menghindari ketidakmampuan untuk menimpa magnifier.createiframe (magnifier.m.img); } this.onMouseMove = magnifier.move; // ini menunjuk ke m.cont this.onmouseout = magnifier.end; }, pindahkan: function (e) {var pos = getPoInterposition (e); // standardisasi peristiwa 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), this.clienteNeight - this. 'px', 'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=mouse x - this.offsetLeft - Jelajahi kotak lebar/2, Math.max dan Math.min sehingga kotak browse tidak akan melebihi gambar}) magnifier.mag.style.display = ''; css (magnifier.m.img, {'top': - (parseInt (this.geteLementsbyTagname ('div') [0] .style.top) * magnifier.m.scale) + 'px', 'left': - (parseint (this.geteLementsbyTagname ('div') [0]. }, end: function (e) {this.geteLementsbyTagname ('div') [0] .style.display = 'none'; magnifier.removeiframe (magnifier.m.img); // hancurkan iframe magnifier.m.mag.style.display = 'none'; }, createIframe: function (elem) {var layer = document.createElement ('iframe'); layer.tabIndex = '-1'; layer.src = 'javascript: false;'; elem.parentnode.appendchild (layer); layer.style.width = elem.offsetWidth + 'px'; layer.style.height = elem.offsetheight + 'px'; }, RemoveIframe: function (elem) {var layers = elem.parentnode.geteLementsbyTagname ('iframe'); while (layers.length> 0) {layers [0] .parentnode.removechild (layers [0]); }}} window.onload = function () {magnifier.init ({cont: document.geteLementById ('magnifier'), img: document.getElementById ('magnifierimg'), mag: document.geteLementById ('magnifier'), skala: 3});} </script> </headed ('magnifier'), skala: 3});} </script> </head '</head> <" src = "lib/gambar/1.jpg" id = "img"/> <div id = "browser"> </div> </div> <div id = "mag"> <img id = "magnifierimg"/> </div> <pilih style = "Posisi: absolute; TOP: 200px; kiri: 650px; width> <100px: 100px: 100px; Timpa </pection> </dectt> </body> </html>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.