suchen

Heim >Web-Frontend >js-Tutorial >Implementierung von Spezialeffekten für Floating-Link-Popup-Bilder

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-26 11:01:421940Durchsuche

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>

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!

php css 指针 var append function 对象 this
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery ruft URL und URL-Parameter ab (mit Code)Nächster Artikel：jquery ruft URL und URL-Parameter ab (mit Code)

In Verbindung stehende Artikel

Mehr sehen