wqce » JQuery

jQueryでロールオーバー＋マウスクリック時に効果を付ける

kimuray — Fri, 26 Mar 2010 14:28:03 +0000

ナビゲーションボタンのロールオーバーなどの効果を付けるときに、
jQueryを使う機会も多いかと思います。
ロールオーバーに関するスクリプトは検索すると多数見つかりますが、

「ボタンをクリックしたときに効果を付ける」

というものが見つからなかったので、自作してみることに。
基本となるスクリプトですが、こちらの記事の

を参考にして作成してみました。

$(function(){
    $("img.action").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mousedown(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1_push$2"))
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).mouseup(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_push(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

img要素にclass=”action”を指定します。

上記記事と同様にロールオーバー用の画像にsample_on.png、
そしてクリック時用の画像にsample_push.png、
というようにそれぞれファイル名の最後に_on、_pushと付けた画像を用意します。

※なお場合によって不具合がでる場合があるかもしれないので、その点はご注意を。

PHOTOを公開しました。

kimuray — Sun, 26 Jul 2009 12:40:34 +0000

PHOTOのページを公開しました。
作成にあたってはjQueryのプラグインGalleriaを使用して作成しました。
ただ導入自体はできたんですが、DEMO1のhead部分のスクリプトがうまく動作せず。
そこで、フェード等のエフェクト効果を一から作ってみることに。

//ロールオーバー
jQuery(function(){
jQuery(".photo li").hover(
function(){
jQuery(this).fadeTo(100,1.0);
},
function(){
jQuery(this).fadeTo(500,0.4);
}

);
});

上記スクリプトでロールオーバー、アウト時のエフェクト効果はつけれたんですが、
active時の透明度の調整ができず。
とりあえずactive時に白枠で囲むようにCSSで設定してみました。
ただやはり不透明になってるのでちょっと見づらいのが難点です＾＾；

Word PressでjQueryのプラグインを使う。

kimuray — Fri, 24 Jul 2009 13:31:29 +0000

PHOTOのページをjQueryのプラグインを使用して作成しようと考えたんですが、
なぜか効果が適用されず・・・・。
ちょっと検索をしてみたところ、原因が分かりました。

jQueryのプログラムを見ると　$()　という記述を良く見ると思うんですが、
この「$」をどうやらprotype.jsなどとの衝突を避けるために、
word pressに組み込まれているjQueryで使用できない仕組みになっているようです。

それじゃあword pressではjQueryは使えない？
となりそうなところですが、解決方法もあるとのこと。
「$」という文字を「jQuery」に置き換えると良いそうです。
ただし$がついているもの全てというわけではなく、

$$　$()　$.

となっているところを置き換えると良いようです。