Este artículo describe el método de JS para lograr la ampliación local o la reducción de las imágenes. Compártelo para su referencia, como sigue:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> magnifier </title> <style type = "text/css">#magnifier {magnifier {width; Altura: 696px; Posición: Absoluto; arriba: 100px; Izquierda: 250px; tamaño de fuente: 0; border: 1px sólido #000;} #img {ancho: 500px; Altura: 696px;} #navegador {borde: 1px sólido #000; Índice Z: 100; Posición: Absoluto; Antecedentes:#555;}#mag {borde: 1px sólido#000; desbordamiento: oculto; Z-Index: 100;} </style> <script type = "text/javaScript"> función getEventObject (w3cEvent) {// evento de la función normalizada return w3cEvent || window.event;} función getpointerposition (e) {// Obtener la función 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};} función setOpacity (elem, nivel) {// configuración de navegador compatible para valores transparentes if (elem.filters) {elem.style.filter = 'alpha (opacity =' + nivel * 100 + ')'; } else {elem.style.opacity = nivel; }} función css (elem, prop) {// La función de configuración de CSS puede establecer fácilmente el valor de CSS y compatible con valores transparentes para (var i en prop) {if (i == 'opacity') {setOpacity (elem, prop [i]); } else {elem.style [i] = prop [i]; }} return elem;} var magnificador = {m: null, init: function (magni) {var m = this.m = magni || {cont: null, // divimg cargando la imagen original img: null, // escala mag: null, // escala escala de marco: 15 // valor de escala, cuanto mayor se ajuste el valor, mayor será la ampliación, pero hay un problema aquí que si no puede ser divisible, se generarán algunos pequeños bordes blancos. No sé cómo resolverlo en este momento} css (m.img, {'posición': 'absoluto', 'ancho': (m.cont.clientwidth * m.scale) + 'px', // el valor de escala de ancho * de la escala original de la imagen original ': (m.cont.clientHeight * m.scale) +' px '// high * scale valor de la imagen original': css (m.mag, {'Display': 'Ninguno', 'Width': M.Cont.clientWidth + 'Px', //m.Cont es la imagen original, que es el mismo ancho que la imagen original. 'Px', // La posición del cuadro de ampliación está lejos a la derecha de la imagen original 10px 'top': m.cont.offsettop + 'px'}) var borderWid = m.cont.getElementsByTagName ('div') [0] .Offsetwidth - m.cont.getElementsByTagName ('div') [0]. // Obtenga el ancho del borde CSS (m.cont.getElementsBytagName ('div') [0], {//m.cont.getElementsByTagName('div')`0] es el cuadro de navegación 'visual del borde 'altura': m.cont.clientheight /m.scale - borderwid + 'px', // el valor de altura /escala de la imagen original - el ancho del borde 'opacidad': 0.5 // set transparencia}) m.img.src = m.cont.getElementsByTagName ('img') [0] .src; // deja que el valor SRC de la imagen original le dé la imagen ampliada m.cont.style.cursor = 'Crosshair'; M.Cont.onMouseOver = Magnifier.Start; }, inicio: función (e) {if (document.all) {// Ejecutar solo en IE, principalmente para evitar la incapacidad de sobrescribir Magnifier.CreateiFrame (Magnifier.M.Img); } this.onMouseMove = Magnifier.Move; // Esto apunta a M.Cont this.onmouseout = Magnifier.end; }, mover: función (e) {var pos = getpointerposition (e); // Estandarización de eventos 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.clientheight - - - this.getElementsBytagName ('div') [0] .Offsetheight) + 'PX', 'izquierda': 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 - Browse Box Width/2, Math.max y Math.min para que el cuadro de navegación no exceda la imagen}) magnifier.m.mag.style.dislay = ''; CSS (Magnifier.M.Img, {'top': - (parseInt (this.getElementsBytagName ('div') [0] .style.top) * Magnifier.m.scale) + 'PX', 'Left': - (parseint (this.getElementsByTagName ('divi') [0] .Style.left) * Magnifier.M.ScALE) }, end: function (e) {this.getElementsBytagName ('div') [0] .style.display = 'none'; magnificador.removeiframe (magnificador.m.img); // destruir iframe magnificador.m.mag.style.display = 'none'; }, createiFrame: function (elem) {var layer = document.createElement ('iframe'); capa.tabindex = '-1'; capa.src = 'javaScript: false;'; elem.parentnode.appendChild (capa); Layer.Style.Width = Elem.OffSetWidth + 'Px'; Layer.Style.Height = Elem.Offsetheight + 'Px'; }, removeiFrame: function (elem) {var capas = elem.parentnode.getElementsByTagName ('iframe'); while (capas.length> 0) {capas [0] .parentnode.removechild (capas [0]); }}}} Window.onLoad = function () {Magnifier.init ({cont: documents endogles src = "lib/images/1.jpg" id = "img"/> <div id = "navegador"> </div> </div> <div id = "mag"> <img id = "magnifieriMg"/> </div> <select select style = "Position: Absolute; Top: 200px; Izquierda: 650px; width: 100px;"> <portion> Select Test </opción de opción; Sobrescribir </option> </select> </body> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.