Heim > Artikel > Web-Frontend > Implementierung von Spezialeffekten für Floating-Link-Popup-Bilder
Implementierung von Spezialeffekten für Floating-Link-Popup-Bilder
- php中世界最好的语言Original
- 2018-04-26 11:01:421833Durchsuche
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='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>
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 + „
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!