[JS]指定した要素のみをマスクして目立たせるスクリプト -jquery.expose

Post on:2009年5月14日

sponsors

ユーザーのアクションをトリガーにして、クィックマスクモードのように指定した要素を目立たせるスクリプトを紹介します。

適用できるのはスタティックな要素だけではなく、フォームやビデオなどにも使用することができます。

こういったユーザーに少しでも集中してほしいコンテンツには、効果が高そうです。

使用方法も簡単で、JSファイルを外部ファイルで指定し、スクリプトで適用箇所とカラーと不透明度を指定します。
最小の記述だと、下記のようになります。

<textarea name="code" class="js" cols="60" rows="5">
$("jQuery SELECTOR").expose({
    color: '#ccc',
    opacity: 0.7,
});
</textarea>

$("jQuery SELECTOR").expose({

color: '#ccc',

opacity: 0.7,

});

</textarea>

オプションではカラーや不透明度のほかに、ロードやクローズ時のスピード、マスクのid・z-indexなどが変更できます。

対応ブラウザはIE6/7+, Fx1.5/2+, Op9+, Safari2+となっており、実装はjQueryのプラグインのためjquery.jsが必要です。