Cet article décrit la méthode de JS pour réaliser l'élargissement local ou la réduction des images. Partagez-le pour votre référence, comme suit:
<! 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"> <éread> <méta http-equiv = "contenu-type" content = "text / html; charset = utf-8" /> <ititle> mignier </tape> <style type = "text / css"> # magicier {witreth: 500px; hauteur: 696px; Position: absolue; En haut: 100px; Gauche: 250px; taille de police: 0; Border: 1px solide # 000;} # img {largeur: 500px; Hauteur: 696px;} # Browser {Border: 1Px Solid # 000; Z-Index: 100; Position: absolue; Contexte: # 555;} # mag {border: 1px solide # 000; débordement: caché; z-index: 100;} </ style> <script type = "text / javascript"> function getEventObject (w3Cevent) {// la fonction normalisée de l'événement return w3cevent || window.event;} fonction getPointerPosition (e) {// Obtenez la fonction 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, niveau) {// Paramètres de navigateur compatibles pour les valeurs transparentes if (elem.filters) {elem.style.filter = 'alpha (OPACITY =' + Level * 100 + ')'; } else {elem.style.opacity = niveau; }} fonction CSS (elem, prop) {// La fonction de paramètre CSS peut facilement définir la valeur CSS et compatible avec des valeurs transparentes pour (var i dans prop) {if (i == 'opacity') {setOpCity (elem, prop [i]); } else {elem.style [i] = prop [i]; }} return elem;} var acquifier = {m: null, init: function (magni) {var m = this.m = magni || {Cont: null, // div img chargeant l'image d'origine img: null, // échelle mag: null, // échelle du trame d'échelle: 15 // valeur d'échelle, plus l'ensemble de valeur est élevé, plus l'agrandissement est grand, mais il y a un problème ici que s'il ne peut pas être divisible, certains petits bords blancs seront générés. Je ne sais pas comment le résoudre pour le moment} CSS (M.Img, {'position': 'Absolute', 'Width': (M.Cont.ClientWidth * M.SCALE) + 'PX', // La largeur * Valeur de l'échelle de l'image d'origine'Height ': (M.Cont.ClientHeight * M.Scale) +' PX '// High * Valeur d'échelle de l'image originale}) CSSS (M.mag, `` PX' 'Affichage': 'Aucun', 'Width': M.Cont.ClientWidth + 'PX', //M.Cont est l'image d'origine, qui est de la même largeur que l'image d'origine. La boîte est loin à droite de l'image d'origine 10px 'top': M.Cont.offsettop + 'px'}) var borderwid = M.Cont.getElementsByTagName ('div') [0] .offsetWidth - m.nt.getElementsByTagName ('div') [0] .ClientWidth; // Obtenez la largeur de la frontière CSS (m.cont.getElementsByTagName ('div') [0], {//m.cont.getElementsByTagname('div') ·0] est la boîte de navigation 'affichage': 'Aucun', // Paramètres ': M.Cont.ClientWidth / M.Scale - BorderWid +' de Border 'Height': M.Cont.ClientHeight / M.Scale - BorderWid + 'PX', // La valeur de hauteur / échelle de l'image d'origine - la largeur de la frontière 'Opacité': 0,5 // Définir la transparence}) M.IMG.SRC = M.Cont.getElementsByTagname ('img') [0] .src; // Laissez la valeur SRC de l'image d'origine donner l'image agrandie m.cont.style.cursor = 'Crosshair'; M.Cont.onMouseOver = Magnifier.Start; }, start: function (e) {if (document.all) {// Exécuter uniquement sous IE, principalement pour éviter l'incapacité de remplacer Magnifier.Createiframe (Magnifier.M.IMG); } this.onmousemove = Magnifier.move; // Cela pointe vers M.Cont this.onMouseout = Magnifier.end; }, move: function (e) {var pos = getPointerPosition (e); // Standardisation de l'événement 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). + 'px', 'gauche': 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 - Browse Box Width / 2, math.max et math.min de sorte que la boîte Browse ne dépassera pas l'image}) Magifier.M.Mag.style.display = ''; CSS (Magnifier.M.Img, {'TOP': - (ParseInt (this.getElementsByTagName ('Div') [0] .Style.Top) * Magnifier.M.Scale) + 'Px', 'Left': - (Parseint (this.getElelementsbyTagname. }, end: function (e) {this.getElementsByTagName ('div') [0] .style.display = 'Aucun'; Magifier.Removeiframe (Magnifier.M.IMG); // Détruiser iframe Magifier.m.mag.style.display = 'Aucun'; }, createIframe: function (elem) {var couche = document.createElement ('iframe'); couche.tabindex = '-1'; couche.src = 'javascript: false;'; elem.parentNode.ApendChild (couche); couche.style.width = elem.offsetwidth + 'px'; couche.style.height = elem.offsetheight + 'px'; }, supprimerame: function (elem) {var couches = elem.parentNode.getElementsByTagName ('iframe'); while (couches.length> 0) {couches [0] .parentNode.RemoveChild (couches [0]); }}} window.onLoad = function () {Magnifier.init ({cont: document.getElementById ('Magnifier'), img: document.getElementByid ('MagnifieRImg'), mag: document.getElementByid ('Magnifier'), Scale: 3});} </cript> src = "lib / images / 1.jpg" id = "img" /> <div id = "Browser"> </ div> </div> <div id = "mag"> <img id = "MagniErimg" /> </div> <SELECT style = "Position: Absolute; Top: 200px; Left: 650px; larget: 100px;> <option> Test de Test </ Option> Écraser </opoption> </ select> </ body> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.