Ich war ein wenig aufgeregt, als ich zum ersten Mal einen Blog gepostet habe. Ich bin jetzt in Tianjin. Ich hoffe, in Zukunft in der Front-End-Branche zu arbeiten, und ich werde lange nicht in der Lage sein, nicht zu studieren. Um meinen Lernprozess und meine Gewinne aufzuzeichnen, bin ich natürlich eine Konsolidierung. Die Dinge, die ich schreibe, sind vielleicht nicht so groß wie der Big Bulle, aber sie sind nur einige grundlegende Inhalte. Natürlich werde ich auch einige gute Artikel sammeln, die ich für gut finde (eigentlich kann ich sie am meisten verstehen ...). Ich glaube, dass ich in Zukunft etwas High-End schreiben kann. Komm schon!
Ich spreche ein bisschen Unsinn und spreche über ernsthafte Angelegenheiten. Vor ein paar Tagen habe ich mir ein Lehrvideo der Tanzhou -Ausbildung angesehen. Der Lehrer benutzte JQuery, um die Wirkung eines Lupe zu erreichen (der Lehrer sagte, es sei zu langsam, und er sprang herum und beobachtete es). Da ich JQuery nicht gut gelernt habe, aber der grundlegende Code ist immer noch verständlich, möchte ich mit dem JS, den ich gerade lerne, üben und hat diesen Effekt schließlich erfolgreich erreicht.
Idee: Lassen Sie zuerst den Move Block und den BimG -Block ausblenden. Wenn sich die Maus zum Box bewegt, werden der Move Block und der BIMG -Block angezeigt und die aktuelle Position der Maus erhalten. Nach der Berechnung wird dann der geeignete Wert für den Bewegungsblock und den BIMG -Block angegeben, um den Vergrößerungsglaseffekt zu erreichen (die Berechnung der Position des Bewegungsblocks und des BIMG -Blocks wird später detailliert)
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Vergrößerung von Glas </title> <link href = "css <div id = "box"> <img src = "bilder/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <img id = "b_bimg"> src = "Images/bimg.jpg"> </div> </div> </body> </html>
CSS -Stil:
*{Margin: 0px; Polsterung: 0px;}#Box {Breite: 430px; Höhe: 430px; Rand: 100px; Margin-Links: 17%; Position: Relativ; // Verwenden Sie hier die relative Positionierung, damit andere Elemente auf dieses Element stützen können, um} #move {Hintergrund-Image: URL (../ Bilder/Move.png); Breite: 220px; Höhe: 220px; Position: absolut; links: 0px; Oben: 0px; Anzeige: Keine; // Lassen Sie es zuerst ausblenden und verwenden Sie JS, um es anzuzeigen} #bimg {width: 430px; Höhe: 430px; Überlauf: versteckt; Position: absolut; Oben: 0px; Links: 450px; Anzeige: Keine; // Lassen Sie es zuerst ausblenden und verwenden Sie JS, um es anzuzeigen} #bimg img {width: 800px; Höhe: 800px; Position: absolut; Oben: 0px; links: 0px;}JavaScript:
Funktion bigimg () {var bbox = document.getElementById ("Box"); var bmove = document.getElementById ("move"); var bbimg = document.getElementById ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onmouseover = function () {// Verschieben Sie die Maus in das Box, um große Bilder anzuzeigen, und wählen Sie Kästchen bbimg.style.display = "block"; BMOVE.Style.display = "Block"; } bbox.onmouseout = function () {// MousEmove zeigt keine großen Bilder und Kontrollkästchen an, wenn das Feld von der Maus bbimg.style.display = "none" entfernt wird; bmove.style.display = "none"; } bbox.onmousemove = function (e) {// Die Mausposition var x = e.clientx; // die Position der Maus relativ zum Ansichtsfenster var y = e.clienty; var t = bbox.offsettop; // Die Position des Box relativ zum Ansichtsfenster var l = bbox.offsetLeft; var _left = x - l - bmove.offsetwidth/2; // Berechnen Sie die Position des Bewegungsvars var _top = y - t -bmove.offseteight/2; if (_top <= 0) // Schieben Sie nach oben im Box_top = 0; else if (_top> = bbox.offseteightheightheightheightheightheightheigheight) // Folge nach unten im Box_top = bbox.offseteight-bmove.offseteight; if (_left <= 0) // Schieben Sie nach links von der Box_Left = 0; else if (_left> = bbox.offsetwidth-bmove.offsetwidth) // Folge nach rechts von box_left = bbox.offsetwidth-bmove.offsetwidth; bmove.style.top = _top + "px"; // Setzen Sie die Position der Bewegung bmove.style.left = _left + "px"; var w = _left/(bBox var b_bimg_top = (b_bimg.offseteightheightheightheightbimg.offseteight)*H; // Berechnen Sie die Position des großen Bildes var b_bimg_left = (b_bimg.offsetwidthbbimg.offsetwidth)*w; b_bimg.style.top = -b_bimg_top + "px"; // Setzen Sie die Standortinformationen des großen Bildes b_bimg.style.left = -b_bimg_left + "px"; }}Reproduktionsbild:
1. Berechnung des Bewegungsblocks
Schwarzer Pfeil:
var x = e.clientx; // die Position der Maus relativ zum Ansichtsfenster var y = e.clienty;
Roter Pfeil:
var t = bbox.offsettop; // Die Position des Box relativ zum Ansichtsfenster var l = bbox.offsetLeft;
Orangefarbene Pfeile:
var _left = x - l - bmove.Offsetwidth/2; // Berechnen Sie die Position des Bewegungsvars var _top = y - t -bmove.offseteight/2;
2. Berechnung des BIMG -Blocks
Verwenden Sie die Skala des Bewegungsblocks innerhalb des beweglichen Bereichs, um die Position des großen Bildes festzulegen
Umzugsbereich des Bewegungsblocks:
bbox.offsetwidth-bmove.offsetwidth
Die aktuellen Koordinaten des Move Block machen den beweglichen Bereich aus:
var w = _left/(bBox
Bimgs Bewegungsbereich:
B_BIMG.OffSETHELT-BBIMG.OFFSETHEGTHELT
Bimgs Standort:
var b_bimg_top = (b_bimg.offseteightheightheightheightbimg.offseteight)*H; // Berechnen Sie die Position des großen Bildes var b_bimg_left = (b_bimg.offsetwidthbbimg.offsetwidth)*w;
Das obige einfache Beispiel für die Verwendung von JS, um den Effekt eines Lupenglas zu erreichen, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.