4

マウスが画像の上にあると、その画像が光るこの効果を見てきました。ボーダーグローについて話しているのではなく、画像の色が光るということです。Pixastic というライブラリがあることがわかりました。グロー効果はここで確認できます。

http://www.pixastic.com/lib/docs/actions/glow/

この効果を画像上でのマウス ホバーに適用する方法はありますか? 光るボタンを作ってみました。

ありがとう！

4

4 に答える 4

5

次のようなマウスオーバーイベントを作成する必要があります。

$("img").hover(
  function () {
    Pixastic.process($(this).get(0), "glow", {amount:0.5, radius:1.0});
  }, 
  function () {
    Pixastic.revert($(this).get(0));
  }
);

最初の関数は、マウス カーソルで画像を入力するとトリガーされます。2 番目の関数は、マウスが画像領域を離れたときに呼び出されます。これは、イメージを初期状態にリセットするために必要です。

于 2012-03-28T09:53:33.687 に答える
3

こんにちは、 CSSを使用してマウス ホバー効果で画像の輝きを与えることができます。

ライブデモをチェックしてください:- http://jsbin.com/inenet/12/edit

または、css ホバー効果のチュートリアルを読むことができます

于 2012-03-28T11:00:17.303 に答える
2

このようなものをお探しですか？

Zurbグローボタン

マウスのすべての冒険に、これをお勧めします

HoverAlls jquery プラグイン

于 2012-03-28T09:50:36.973 に答える
1

Pixastic の例でわかるように、demo()関数はフォームの送信時に呼び出されます。

function demo() {
    Pixastic.process(document.getElementById("demoimage"), "glow", {
        amount : $("#value-amount").val(),
        radius : $("#value-radius").val()
    });
}

したがってglow.js、プロジェクトに含めて、ホバー時にこの関数を呼び出す必要があります。

$('img.myimage').hover(function() {
    Pixastic.process($(this), "glow", {
        amount : 0.5,
        radius : 0.5
    });
}, function() {
    Pixastic.process($(this), "glow", {
        amount : 0,
        radius : 0
    });
});

またはサンプルショーrevert()のように

于 2012-03-28T09:51:50.617 に答える