Este artigo descreve o método do JS para obter aumento local ou redução de imagens. Compartilhe -o para sua referência, como segue:
<! 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/css">#magnifier{ width:500px; Altura: 696px; Posição: Absoluto; topo: 100px; Esquerda: 250px; tamanho de fonte: 0; Border: 1px Solid #000;} #img {largura: 500px; Altura: 696px;} #navegador {borda: 1px Solid #000; Index z: 100; Posição: Absoluto; Antecedentes:#555;}#mag {borda: 1px Solid#000; estouro: oculto; Z-Index: 100;} </style> <script type = "text/javascript"> function getEventObject (w3cevent) {// função normalizada de evento retorna w3cevent || Window.Event;} função getPointerPosition (e) {// obtenha a função 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};} função setopacity (elem, nível) {// Configurações compatíveis com o navegador para valores transparentes se (elem.filters) {elem.style.filter = 'alpha (opacity =' + nível * 100 + ')'; } else {elem.style.opacity = nível; }} função css (elem, prop) {// A função de configuração CSS pode definir facilmente o valor CSS e compatível com valores transparentes para (var i em prop) {if (i == 'opacity') {setopacity (elem, prop [i]); } else {elem.style [i] = prop [i]; }} retornar elem;} var magniFier = {m: null, init: function (magni) {var m = this.m = Magni || {cont: null, // div img carregando a imagem original img: null, // escala de mag: null, // Escala da escala Escala: 15 // Valor da escala, maior o conjunto de valor, maior o aumento, mas há um problema aqui que, se não puder ser divisível, algumas pequenas bordas brancas serão geradas. Não sei como resolvê -lo no momento} css (m.img, {'position': 'absoluto', 'largura': (m.cont.clientwidth * m.scale) + 'px', // a largura * valor da escala da imagem original ': (m.cont.clientHeight * m.scale) +' px 'px' /high * ': 'Display': 'None', 'Width': M.Cont.ClientWidth + 'PX', //M.Cont é a imagem original, que é a mesma largura que a imagem original. bem à direita da imagem original 10px 'top': m.cont.offsettop + 'px'}) var borderwid = m.cont.getElementsByTagName ('div') [0] .offsetWidth - m.cont.getElementsByTagname ('div') [0] .clientWidth; // Obtenha a largura do CSS da borda (m.cont.getElementsByTagName ('div') [0], {//m.cont.getElementsByTagname('Div').0] é a Width/Width ', a Width/Width' the WidwId/WidwId 'thathing-s width/widwid' the widwid/widwid + the widwid + the widwid + the widwid + the widwid/widwid + thathorwid///1fling-sCont.ClientWidth/M.Scale ': da borda 'Altura': M.Cont.ClientHeight /M.Scale - BorderWid + 'PX', // O valor da altura /escala da imagem original - a largura da borda 'opacidade': 0.5 // Definir transparência}) M.Img.src = m.cont.getElementsbyTagName ('img') [0]. // Deixe o valor SRC da imagem original para ampliar a imagem m.cont.style.cursor = 'crosshair'; M.Cont.onMouseOver = MagniFier.Start; }, start: function (e) {if (document.all) {// Execute apenas no IE, principalmente para evitar a incapacidade de substituir o LIGNIFER.CREATEIFRAME (MONGIFER.M.IMG); } this.onMousEmove = Magnifier.move; // Isso aponta para M.Cont this.onMouseOut = Magnifier.end; }, mover: function (e) {var pos = getPointerPosition (e); // padronização 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 -Eight -T.TeLements. 'px', 'esquerda': math.min (math.max (pos.x - this.offsetleft - parseint (this.getElementsBytagName ('div') [0] .style.width) /2,0), this.clientWidth - this.getElementsbyTagname ('div') [0]. this.OffSetLeft - Procurar a largura da caixa/2, Math.max e Math.Min para que a caixa de navegação não exceda a imagem}) MONIFER.MAG.STYLE.DISPLAY = ''; CSS (Magnifier.M.Img, {'top': - (ParseInt (this.getElementsByTagName ('div') [0] .style.top) * magniFier.m.cale) + 'px', 'esquerda': - (parseint (this.getElementsByTagname ('Div') [0]. }, final: function (e) {this.getElementsByTagName ('div') [0] .style.display = 'nenhum'; Magnifier.RemoveIframe (Magnifier.M.Img); // Destroe o iframe Magnifier.m.mag.style.display = 'None'; }, createiframe: function (elem) {var layer = document.createElement ('iframe'); camada.tabindex = '-1'; camada.src = 'javascript: false;'; elem.parentnode.appendChild (camada); camada.style.width = elem.offsetWidth + 'px'; camada.style.Height = elem.offsetHeight + 'px'; }, removeframe: function (elem) {var layers = elem.parentnode.getElementsByTagName ('iframe'); while (Layers.Length> 0) {camadas [0] .parentNode.RemoVechild (camadas [0]); }}} window.onload = function () {magniPier.init ({cont: document.getElementById ('Magnifier'), IMG: document.getElementById ('Magnifierimg'), Mag: Document.getElementById ('Magnifier', Scale: 3});} </script> src = "lib/imagens/1.jpg" id = "img"/> <div id = "navegador"> </div> </div> <div id = "mag"> <img id = "Magnifierimg"/> </div> Substituir </pption> </leclect> </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 e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.