[JS]ホバー時にリンクのさまざまな情報を表示するスクリプト -HoverAttribute

サイト構築 -JavaScript

Post on:2010年5月14日

HoverAttributeのデモ

表示できるものはhrefやrelやtitileなど属性内のデータで、URLのフォーマットやアニメーションを変更することができます。

Examples 1：ドメインを強調表示

Examples 2：「http://」と「www」を省略して、URLの最後を強調表示

Examples 3：文字数を指定して、クエリを強調表示

Examples 4：title内のデータを表示して、アニメーションは下から

HoverAttributeの実装

実装は簡単で、上記のデモやダウンロードできるデモファイルを参照ください。

Example 1は下記のようになります。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<h3 class="demo-heading-1"><a href="http://www.facebook.com/alwallin">1. Regular heading link (hover this link)</a></h3>
</textarea>

<h3 class="demo-heading-1"><a href="http://www.facebook.com/alwallin">1. Regular heading link (hover this link)</a></h3>

</textarea>

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$("h3.demo-heading-1 a").hoverAttribute();
</textarea>

$("h3.demo-heading-1 a").hoverAttribute();

</textarea>

スクリプトのオプションでは、表示する属性、アニメーションの時間、表示する書式、文字数などを指定することができます。詳しくは、下記を参照ください。
HoverAttributeの使い方

オプションがフルの状態は、下記のようになります。

<textarea name="code" class="html" cols="60" rows="5">
$(".selector").hoverAttribute({
   attribute: "href",
   animationTime: 0.3,
   animationEase: "linear",
   tweenInFrom: "left",
   parseAsURL: null,
   removeProtocol: true,
   removeWWW: false,
   wrapLink: "after",
   wrapLength: 60,
   highlightURLPart: "host",
   cssSettings: {
      canExpandFullWidth: true
   }
});
</textarea>