Maison > Article > interface Web > Implémentation d'effets spéciaux pour les images pop-up de liens flottants
Implémentation d'effets spéciaux pour les images pop-up de liens flottants
- php中世界最好的语言original
- 2018-04-26 11:01:421833parcourir
Cette fois, je vais vous présenter la mise en œuvre du pop-up de lien flottant effet spécial d'image Quelles sont les précautions pour la mise en œuvre de l'effet spécial d'image pop-up de lien flottant ? Voici un cas pratique, jetons un oeil.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>PHP</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>
Commentaires de code :
1.this.screenshotPreview=function(){ }, déclare une fonction à To obtenir 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){}), précise que lorsque la souris se déplace vers le lien et La fonction à exécuter en quittant le lien.
5.this.t = this.title, attribuez la valeur de l'attribut titre du lien à l'attribut t, ici ceci est l'objet lien pointant vers le survol actuel de la souris.
6.var c = (this.t != "") ? "
" + this.t : "",if this.t S'il n'est pas vide, c'est-à-dire que 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 + "
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(), supprime 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 supérieure et gauchede l'élément p pour obtenir l'effet suivant.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment gérer l'échec de l'ancrage de page dans iframe
Explication détaillée des étapes pour obtenir le objet document dans iframe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!