jQuery-Maus-Hover-Link-Popup, Bild folgen, Beispielcode_Javascript-Kenntnisse-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 15:21:10

Original

1162 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 != "") ? "
" 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("

" 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.