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:101167parcourir
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 != "") ? "<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.
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript