Maison > Article > interface Web > jQuery lien de survol de la souris pop-up suivre l'exemple d'image compétences code_javascript

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

WBOYoriginal: 2016-05-16 15:21:101217parcourir

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>

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 != "") ? "076402276aae5dbec7f672f8f4e5cc81" 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("15918063f12c8a89e603632d0a3ad085bb0d1b54c29fd88a8e8b568dfb04cf65" 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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples détaillés de compétences en matière de format de données JSON et de chaîne de champ de données au format JSON conversion_javascriptArticle suivant：Exemples détaillés de compétences en matière de format de données JSON et de chaîne de champ de données au format JSON conversion_javascript

Articles Liés

Voir plus