In diesem Kapitel 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. Warte,
Schauen wir uns zunächst ein Demobild an
Das Folgende ist ein Codebeispiel:
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("a.preview").preview();
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>
<body>
<div class="zxx_out_box">
<div class="zxx_in_box">
<h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
<div class="zxx_main_con">
<div class="zxx_test_list">
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>Der obige Code hat unsere Anforderungen erfüllt, was meint ihr?
Als nächstes werfen wir einen Blick auf eine kurze Beschreibung der Verwendung:
1. Sie müssen das href-Attribut des a-Tags verwenden. Das Prinzip dieses jQuery-Plugins besteht darin, dass ein großes Bild-HTML-Fragment mit dem href-Zeigerpfad angezeigt wird Dieses Fragment wird basierend auf der Mausposition geladen. Dies erzeugt den Effekt, dass die Maus über das Miniaturbild bewegt wird, um das größere Bild anzuzeigen. Die Adresse des großen Bildes ist der Inhalt des href-Attributs des a-Tags. Beispiel: Thumbnail Wenn das a-Tag eine Methode zum Anzeigen eines großen Bildes enthält, wird auf der Seite das Bild „xx.jpg“ angezeigt, auf das der href verweist.
2. Die verwendete Methode ist: target selector.preview(); Für das obige thumbnail können Sie beispielsweise $("a") verwenden. . Preview(); Dieser Code implementiert den Effekt der Anzeige des Bildes xx.jpg, wenn die Maus über den Textlink „Thumbnail“ bewegt wird.
3. Es werden nur vier Bildformate unterstützt: PNG, GIF, JPG und BMP. Sie können den regulären Ausdruck des Plug-in-Codes ändern, um die unterstützten Bildformattypen zu erweitern.
Im Folgenden finden Sie eine kurze Einführung in den Implementierungsprozess:
1. 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, deklarieren Sie eine Variable, um den horizontalen Abstand des Mauszeigers vom Popup-Bild anzugeben.
3.yOffset=30, deklarieren Sie eine Variable, um den vertikalen Abstand des Mauszeigers vom Popup-Bild anzugeben.
4.$("a.screenshot").hover(function(e){}, function(e){}) gibt die Funktion an, die ausgeführt werden soll, wenn sich die Maus zum Link bewegt und den Link verlässt.
5.this.t = this.title, weisen Sie dem t-Attribut den Titelattributwert des Links zu, wobei dies das Linkobjekt ist, das auf den aktuellen Mauszeiger zeigt.
6.var c = (this.t != "") ? "
" this.t : "", wenn this.t nicht leer ist, d. h. der Titelattributwert vorhanden ist, Fügen Sie dann ein Zeilenumbruchzeichen ein und verketten Sie den aktuellen Header-Inhalt. Andernfalls wird c auf leer gesetzt.
7.$("body").append("
" c "
8.$("#screenshot").css("top",(e.pageY-xOffset) "px").css("left",(e.pageX yOffset) "px").fadeIn( „schnell“), legen Sie die oberen und linken Attributwerte des p-Elements fest und verwenden Sie 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 festzulegen, dass das Bild folgt, wenn sich der Mauszeiger bewegt.
12.$("#screenshot").css("top",(e.pageY-xOffset) "px") .css("left",(e.pageX yOffset) "px"), set p Die oberen und linken Attributwerte des Elements können den folgenden Effekt erzielen.
2. Verwandte Lektüre:
1. Die Funktion hover() finden Sie im Kapitel jQuerys Hover-Ereignis .
2. Informationen zur append()-Funktion finden Sie im Kapitel jQuerys append()-Methode .
3. Informationen zur Funktion css() finden Sie im Kapitel css()-Methode von jQuery .
4. Informationen zum Attribut pageY finden Sie im Kapitel zum Attribut jQuery’s event.pageY.
5. Informationen zur Funktion fadeIn() finden Sie im Kapitel Methode fadeIn() von jQuery.
6. Informationen zur Funktion „remove()“ finden Sie im Kapitel jQuerys Methode „remove()“ .
7. Informationen zum Mousemove-Ereignis finden Sie im Kapitel jQuerys Mousemove-Ereignis .
