jQuery réalise l'effet spécial de faire apparaître l'image lorsque la souris glisse dessus it

jQuery réalise l'effet spécial de faire apparaître l'image lorsque la souris glisse dessus it_jquery

WBOY

Libérer： 2016-05-16 15:21:08

original

1368 Les gens l'ont consulté

Ce chapitre présente un effet couramment utilisé, c'est-à-dire que lorsque la souris glisse sur un lien, un calque qui suit le mouvement du pointeur de la souris peut apparaître dans les applications pratiques, il s'agit généralement d'un texte explicatif ou d'images pour le lien. , etc. Attendez,

Jetons d'abord un coup d'œil à une photo de démonstration

Ce qui suit est un exemple de code :

<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a.preview").preview();	 
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>

<body>
<div class="zxx_out_box">
 <div class="zxx_in_box">
  <h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
  <div class="zxx_main_con">
			<div class="zxx_test_list">
   	<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
    	<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
    </a>
   </div>   
  </div>

 </div>
</div>
</body>
</html>

Copier après la connexion

Le code ci-dessus répond à nos exigences, qu'en pensez-vous ?

Jetons ensuite un coup d'œil à une brève description de la façon de l'utiliser :

1. Vous devez utiliser l'attribut href de la balise a. Le principe de ce plug-in jQuery est que lorsque la souris se déplace vers la vignette (ou le texte du lien), un grand fragment d'image html contenant le chemin de pointage href. sera chargé. Ce fragment est basé sur la position de la souris est positionnée de manière absolue. Cela produit l'effet de déplacer la souris sur la vignette pour afficher l'image plus grande. L'adresse de la grande image est le contenu de l'attribut href de la balise a. Par exemple : Thumbnail Si la balise a contient une méthode pour afficher une grande image, la page affichera l'image "xx.jpg" pointée par le href.

2. La méthode utilisée est : target selector.preview(); Par exemple, pour le thumbnail, vous pouvez utiliser $("a") . preview(); Ce code implémente l'effet d'afficher l'image xx.jpg lorsque la souris est déplacée vers le lien texte "Vignette".

3. Seuls quatre formats d'images, png, gif, jpg et bmp, sont pris en charge. Vous pouvez modifier l'expression régulière du code du plug-in pour étendre les types de formats d'image pris en charge.

Ce qui suit est une brève introduction au processus de mise en œuvre :

1. Commentaires du code :

1.this.screenshotPreview=function(){ }, déclare une fonction pour implémenter l'effet suivant. Dans cet effet, cela peut en fait être omis, il pointe vers la fenêtre.

2.xOffset=10, déclarez une variable pour spécifier la distance horizontale du pointeur de la souris par rapport à l'image pop-up.

3.yOffset=30, déclarez une variable pour spécifier la distance verticale du pointeur de la souris par rapport à l'image pop-up.

4.$("a.screenshot").hover(function(e){}, function(e){}) spécifie la fonction à exécuter lorsque la souris se déplace vers le lien et quitte le lien.

5.this.t = this.title, attribuez la valeur de l'attribut title du lien à l'attribut t, où il s'agit de l'objet lien pointant vers le survol actuel de la souris.

6.var c = (this.t != "") ? "
" this.t : "", si this.t n'est pas vide, c'est-à-dire que la valeur de l'attribut title existe, puis insérez un caractère de nouvelle ligne et concatène le contenu de l'en-tête actuel, sinon définit c comme vide.

7.$("body").append("

" c "

") , ajoutez des images et des descriptions associées au corps.

8.$("#screenshot").css("top",(e.pageY-xOffset) "px").css("left",(e.pageX yOffset) "px").fadeIn( "fast"), définissez les valeurs d'attribut haut et gauche de l'élément p et utilisez l'effet de fondu pour afficher.

9.this.title=this.t, attribuez le contenu du titre à this.title En fait, il n'y a pas de problème sans cette phrase, c'est un peu redondant.

10.$("#screenshot").remove(), supprimez l'élément p.

11.$("a.screenshot").mousemove(function(e){}), utilisé pour définir l'image à suivre lorsque le pointeur de la souris se déplace.

12.$("#screenshot").css("top",(e.pageY-xOffset) "px") .css("left",(e.pageX yOffset) "px"), set p Les valeurs d'attribut supérieure et gauche de l'élément peuvent obtenir l'effet suivant.

2. Lecture connexe :

1. La fonction hover() se trouve dans le chapitre L'événement hover de jQuery .
2. Pour la fonction append(), veuillez vous référer au chapitre Méthode append() de jQuery .
3. Pour la fonction css(), veuillez vous référer au chapitre Méthode css() de jQuery .
4. Pour l'attribut pageY, veuillez vous référer au chapitre de l'attribut event.pageY de jQuery.
5. Pour la fonction fadeIn(), veuillez vous référer au chapitre Méthode fadeIn() de jQuery.
6. Pour la fonction Remove(), veuillez vous référer au chapitre Méthode Remove() de jQuery .
7. Pour l'événement mousemove, veuillez vous référer au chapitre Événement mousemove de jQuery .