jQuery がホバー合成を実装する方法 events_jquery-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery がホバー合成を実装する方法 events_jquery

May 16, 2016 pm 03:46 PM

hover jquery 合成イベント

この記事の例では、jQuery がホバー合成イベントを実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

jQuery ホバー合成イベント。合成ホバーイベントを使用して折り畳まれたパネルを作成します。クリックとは異なり、パネルはマウスをホバーすることで展開できます。この特殊効果コードはシャープの jQuery ブックから提供されています。

実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

&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;

ログイン後にコピー

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。