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

テキストリンクにマウスでホバーをすると、リンク先のURLやテキスト情報をアニメーションで表示するスクリプトをafEkenholm Web Designから紹介します。

デモのキャプチャ

HoverAttribute jQuery plugin
デモ

HoverAttributeのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

HoverAttributeの実装

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

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

HTML

JavaScript

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

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

HoverAttributeはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2018 coliss