jQuery lien de survol de la souris pop-up suivre l'exemple d'image compétences code

jQuery lien de survol de la souris pop-up suivre l'exemple d'image compétences code_javascript

WBOY

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

original

1246 Les gens l'ont consulté

Cet article 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, voici l'exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>脚本之家</title>
<style type="text/css">
body{
 margin:0;
 padding:40px;
 background:#fff;
 font:80% Arial, Helvetica, sans-serif;
 color:#555;
 line-height:180%;
}
a{
 text-decoration:none;
 color:#f30; 
}
p{
 clear:both;
 margin:0;
 padding:.5em 0;
}
img{border:none;}
#screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
this.screenshotPreview=function(){ 
 xOffset = 10;
 yOffset = 30;
 $("a.screenshot").hover(function(e){
 this.t = this.title;
 var c = (this.t != "") &#63; "<br/>" + this.t : "";
 $("body").append("<p id='screenshot'><img src='"+this.rel+"' />"+c+"</p>");   
 $("#screenshot")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast");  
 },
 function(){
 this.title = this.t; 
 $("#screenshot").remove();
 }); 
 $("a.screenshot").mousemove(function(e){
 $("#screenshot")
 .css("top",(e.pageY-xOffset)+"px")
 .css("left",(e.pageX+yOffset)+"px");
 }); 
};
$(document).ready(function(){
 screenshotPreview();
});
</script>
</head>
<body>
<a href="#" class="screenshot" title="蚂蚁部落" rel="mytest/demo/thesmall.jpg">蚂蚁部落</a>欢迎您
</body>
</html>

Copier après la connexion

Rendu :

Le code ci-dessus répond à nos exigences. Voici une brève introduction au processus de mise en œuvre :
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éclare une variable pour spécifier la distance horizontale du pointeur de la souris par rapport à l'image contextuelle.
3.yOffset=30, déclare une variable pour spécifier la distance verticale du pointeur de la souris par rapport à l'image contextuelle.
4.$("a.screenshot").hover(function(e){}, function(e){}), spécifie quand la souris se déplace vers le lien et quitte le lien à exécuter.
5.this.t = this.title, attribue la valeur de l'attribut title du lien à l'attribut t, où ceci est le pointeur vers L'objet lien actuellement survolé par la souris.
6.var c = (this.t != "") ? "
" this.t : "", Si this.t n'est pas vide, Autrement dit, si la valeur de l'attribut title existe, insérez un caractère de nouvelle ligne et connectez le contenu du titre actuel, sinon définissez c sur 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éfinit les valeurs d'attribut haut et gauchede l'élément p et utilise 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){}), est 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") , définit les valeurs d'attribut haut et gauchede l'élément p pour obtenir l'effet suivant.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.