So implementiert jQuery die Hover-Synthese events

Heim

Web-Frontend

js-Tutorial

So implementiert jQuery die Hover-Synthese events_jquery

May 16, 2016 pm 03:46 PM

hover jquery 合成事件

Das Beispiel in diesem Artikel beschreibt, wie jQuery Hover-Syntheseereignisse implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

jQuery-Hover-Syntheseereignis: Verwenden Sie das Synthese-Hover-Ereignis, um ein gefaltetes Panel zu erstellen. Das Panel kann durch Bewegen der Maus erweitert werden, was sich von Click unterscheidet. Dieser Spezialeffektcode stammt aus dem scharfen jQuery-Buch.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jQuery hover合成事件&lt;/title&gt;
&lt;script src="jquery1.3.2.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;style&gt;
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next("div.content").show();
 },function(){
  $(this).next("div.content").hide(); 
 })
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="panel"&gt;
 &lt;h5 class="head"&gt;什么是jQuery&#63;&lt;/h5&gt;
 &lt;div class="content"&gt;
  jQuery hover合成事件，利用合成Hover事件制作折合面板，鼠标Hover上面即可展开面板，与Click不尽相同，此特效代码来自锋利的jQuery一书。
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Erklärung dieser Website

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