recherche

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中世界最好的语言
php中世界最好的语言original
2018-04-26 11:01:421900parcourir

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=&#39;screenshot&#39;><img src=&#39;"+this.rel+"&#39; />"+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 + "

"), Ajoutez l'image et la description associée 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 gauche​​de 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 gauche​​de 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!

php css 指针 var append function 对象 this
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：jquery obtient l'URL et les paramètres d'URL (avec code)Article suivant：jquery obtient l'URL et les paramètres d'URL (avec code)

Articles Liés

Voir plus