J'étais un peu excité quand j'ai publié un blog pour la première fois. Je suis maintenant à Tianjin. J'espère travailler dans l'industrie frontale à l'avenir et je ne pourrai pas étudier pendant longtemps. Afin d'enregistrer mon processus d'apprentissage et mes gains, je suis bien sûr une consolidation. Les choses que j'écris n'est peut-être pas aussi grande que le grand taureau, mais ce ne sont qu'un contenu de base. Bien sûr, je vais également collecter de bons articles qui, je pense, sont bons (en fait, je peux les comprendre le plus ...). Je crois que je peux écrire quelque chose haut de gamme à l'avenir. allez!
Je parle un peu les bêtises, je parle de questions sérieuses. Il y a quelques jours, j'ai regardé une vidéo d'enseignement de l'éducation de Tanzhou. L'enseignant a utilisé JQuery pour réaliser l'effet d'une loupe (l'enseignant a dit que c'était trop lent, et il sautait et le regardait). Comme je n'ai pas bien appris JQuery, mais le code de base est toujours compréhensible, je veux pratiquer avec le JS que j'apprends actuellement et finalement avec succès cet effet.
Idée: laissez d'abord le bloc de mouvement et le bloc BIMG. Lorsque la souris se déplace vers la boîte, le bloc de déplacement et le bloc BIMG sont affichés et la position actuelle de la souris est obtenue. Ensuite, après le calcul, la valeur appropriée pour le bloc de déplacement et le bloc BIMG est donnée pour atteindre l'effet de vitrail (le calcul de la position du bloc de déplacement et du bloc BIMG est détaillé plus tard)
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <tit-title> loupe </ title> <link href = "css / bigimg.css" rel = "Stylesheet" /> <script src = "js / bigImg.js"> </cript> </cgus <div id = "box"> <img src = "images / simg.jpg"> <div id = "move"> </ div> <div id = "bimg"> <img id = "b_bimg"> src = "images / bimg.jpg"> </ div> </ div> </ body> </html>
Style CSS:
* {margin: 0px; rembourrage: 0px;} # box {largeur: 430px; hauteur: 430px; marge: 100px; marge-gauche: 17%; Position: relative; // utilise un positionnement relatif ici afin que d'autres éléments puissent s'appuyer sur cet élément pour positionner} #move {background-iMage: url (../ images / move.png); Largeur: 220px; Hauteur: 220px; Position: absolue; gauche: 0px; En haut: 0px; Affichage: aucun; // laissez-le se cacher d'abord et utilisez JS pour l'afficher} #bimg {width: 430px; hauteur: 430px; débordement: caché; Position: absolue; En haut: 0px; Gauche: 450px; Affichage: aucun; // laissez-le se cacher d'abord et utilisez JS pour l'afficher} #bimg img {width: 800px; hauteur: 800px; Position: absolue; En haut: 0px; à gauche: 0px;}Javascript:
fonction 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 () {// Déplacez la souris vers la boîte pour afficher de grandes images et sélectionnez les cases bbimg.style.display = "block"; bmove.style.display = "bloc"; } bbox.onmouseout = function () {// MouseMove n'affiche pas de grandes images et des cases à cocher lorsque la case est éloignée de la souris bbimg.style.display = "None"; bmove.style.display = "aucun"; } bbox.onmousemove = fonction (e) {// Obtenez la position de la souris var x = e.clientx; // la position de la souris par rapport à la vision var y = e.clienty; var t = bbox.offsetTop; // la position de la boîte par rapport à la fenêtre var l = bbox.offsetLeft; var _left = x - l - bmove.offsetwidth / 2; // Calculez la position du mouvement var _top = y - t -bmove.offsetheight / 2; if (_top <= 0) // glisse en haut du box_top = 0; else if (_top> = bbox.offsetheight-bmove.offsetheight) // glissez vers le bas du box_top = bbox.offsetheight-bmove.offsetheight; if (_left <= 0) // glissez vers le plus à gauche du box_left = 0; else if (_left> = bbox.offsetwidth-bmove.offsetwidth) // glissa vers le plus à droite du box_left = bbox.offsetwidth-bmove.offsetWidth; bmove.style.top = _top + "px"; // définir la position de déplacer bmove.style.left = _left + "px"; var w = _left / (bbox.offsetwidth-bmove.offsetwidth); // calculer le rapport de mouvement var h = _top / (bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight) * h; // calculer la position de la grande image var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth) * w; b_bimg.style.top = -b_bimg_top + "px"; // définir les informations de localisation de la grande image b_bimg.style.left = -b_bimg_left + "px"; }}Image de reproduction:
1. Calcul du bloc de déplacement
Flèche noire:
var x = e.clientx; // La position de la souris par rapport à la fenêtre var y = e.clienty;
Flèche rouge:
var t = bbox.offsetTop; // la position de la boîte par rapport à la fenêtre var l = bbox.offsetLeft;
Flèches orange:
var _left = x - l - bmove.offsetwidth / 2; // Calculez la position de mouvement var _top = y - t -bmove.offsetheight / 2;
2. Calcul du bloc BIMG
Utilisez l'échelle du bloc de déplacement dans la plage mobile pour définir la position de la grande image
Plage de déplacement de bloc de déplacement:
bbox.offsetwidth-bmove.offsetwidth
Les coordonnées actuelles du bloc Move représentent la plage mobile:
var w = _left / (bbox.offsetwidth-bmove.offsetwidth); // calculer le rapport de mouvement var h = _top / (bbox.offsetheight-bmove.offsetheight);
Range de mouvement de Bimg:
b_bimg.offsetheight-bbimg.offsetheight
Emplacement de Bimg:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight) * h; // calculer la position de la grande image var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth) * w;
L'exemple simple ci-dessus de l'utilisation de JS pour réaliser l'effet d'une loupe est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.