suchen

Heim >Web-Frontend >js-Tutorial >jQuery erkennt den besonderen Effekt, dass das Bild angezeigt wird, wenn die Maus über it_jquery bewegt wird

jQuery erkennt den besonderen Effekt, dass das Bild angezeigt wird, wenn die Maus über it_jquery bewegt wird

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

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: 86143da451ad1c7e93dd44b388fa0ce5Thumbnail5db79b134e9f6b82c0b36e0489ee08ed 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 86143da451ad1c7e93dd44b388fa0ce5thumbnail5db79b134e9f6b82c0b36e0489ee08ed 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 != "") ? "076402276aae5dbec7f672f8f4e5cc81" 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("15918063f12c8a89e603632d0a3ad085bb0d1b54c29fd88a8e8b568dfb04cf65" c "94b3e26ee717c64999d7867364b1b4a3") , fügen Sie dem Körper Bilder und zugehörige Beschreibungen hinzu.

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 .

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：Implementierung von tabellenaktualisierungsfreiem Paging basierend auf jquery_jqueryNächster Artikel：Implementierung von tabellenaktualisierungsfreiem Paging basierend auf jquery_jquery

In Verbindung stehende Artikel

Mehr sehen