suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery-Maus-Hover-Link-Popup, Bild folgen, Beispielcode_Javascript-Kenntnisse

jQuery-Maus-Hover-Link-Popup, Bild folgen, Beispielcode_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:21:101217Durchsuche

In diesem Artikel wird ein häufig verwendeter Effekt vorgestellt: Wenn die Maus über einen Link gleitet, kann eine Ebene angezeigt werden, die der Bewegung des Mauszeigers folgt. In praktischen Anwendungen handelt es sich normalerweise um erklärenden Text oder Bilder für den Link usw. Warten Sie, hier ist das Codebeispiel: 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>脚本之家</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 != "") &#63; "<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>

Rendering:

Der obige Code erfüllt unsere Anforderungen. Hier ist eine kurze Einführung in den Implementierungsprozess:
Codekommentare:
1.this.screenshotPreview=function(){ }, deklariert eine Funktion zur Implementierung des folgenden Effekts. In diesem Effekt kann dieser tatsächlich weggelassen werden, er 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 zum Link bewegt und verlässt die auszuführende Link-Funktion.
5.this.t = this.title, weist den Title-Attributwert des Links dem t-Attribut zu, wobei dies der Zeiger ist to Das Linkobjekt, über das sich derzeit die Maus bewegt.
6.var c = (this.t != "") ? "076402276aae5dbec7f672f8f4e5cc81" this.t : ", Wenn this.t nicht leer ist, Das heißt, wenn 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("15918063f12c8a89e603632d0a3ad085bb0d1b54c29fd88a8e8b568dfb04cf65" c "Fügen Sie Bilder und zugehörige Beschreibungen zum Körper 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(), Entferne 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.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

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：Detaillierte Beispiele für JSON-Datenformat- und JSON-Format-Datenfeld-String-Conversion_Javascript-KenntnisseNächster Artikel：Detaillierte Beispiele für JSON-Datenformat- und JSON-Format-Datenfeld-String-Conversion_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen