Implementierung von Spezialeffekten für Floating-Link-Popup-Bilder-js-Tutorial-php.cn

Implementierung von Spezialeffekten für Floating-Link-Popup-Bilder

php中世界最好的语言

Freigeben： 2018-04-26 11:01:42

Original

1892 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Implementierung des Floating-Link-Popup-Bild-Spezialeffekts vorstellen. Welche Vorsichtsmaßnahmen gibt es für die Implementierung des Floating-Link-Popup-Bild-Spezialeffekts? Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

<!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>

Nach dem Login kopieren

Codekommentare:
1.this.screenshotPreview=function(){ }, deklariert eine Funktion zur Implementierung des folgenden Effekts In diesem Fall kann dies tatsächlich weggelassen werden, es zeigt auf das Fenster.
2.xOffset=10, deklariert eine Variable, um den horizontalen Abstand des Mauszeigers vom Popup-Bild anzugeben.
3.yOffset=30, deklariert eine Variable, um den vertikalen Abstand des Mauszeigers vom Popup-Bild anzugeben.
4.$("a.screenshot").hover(function(e){}, function(e){}), gibt an, wann sich die Maus bewegt den Link und die Funktion, die beim Verlassen des Links ausgeführt werden soll.
5.this.t = this.title, Weisen Sie dem t-Attribut den Title-Attributwert des Links zu, hier dies ist das Linkobjekt, das auf den aktuellen Mauszeiger zeigt.
6.var c = (this.t != "") ? "
" + this.t : ",if this.t Wenn es nicht leer ist, dh der Titelattributwert vorhanden ist, fügen Sie ein Zeilenumbruchzeichen ein und verbinden Sie den aktuellen Titelinhalt. Andernfalls setzen Sie c auf leer.
7.$("body").append("

"+ c + „

“), Fügen Sie das Bild und die zugehörige Beschreibung zum Text hinzu.
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset )+"px").fadeIn("fast"), legt die oberen und linken Attributwerte des p-Elements fest und verwendet den Einblendeffekt zur Anzeige.
9.this.title=this.t, Weisen Sie den Titelinhalt diesem.title zu. Tatsächlich gibt es ohne diesen Satz kein Problem, er ist etwas überflüssig .
10.$("#screenshot").remove(), entfernt das p-Element.
11.$("a.screenshot").mousemove(function(e){}), wird verwendet, um das Bild festzulegen, das folgt, wenn sich der Mauszeiger bewegt.
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset )+"px"), legt die oberen und linken Attributwerte des p-Elements fest, um den folgenden Effekt zu erzielen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit Seitenankerfehlern im Iframe umgeht

Detaillierte Erläuterung der Schritte zum Erhalten des Dokumentobjekt im Iframe

Das obige ist der detaillierte Inhalt vonImplementierung von Spezialeffekten für Floating-Link-Popup-Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!