Creating an Image Slider


Description: 画像にマウスオーバーでスライドダウンするエフェクトをかけます。少しのコードで実装可能です。
Sample: demo
Tutorial: CSS and Jquery – Creating an Image Slider
License: -

Sample


color structure

Note

$(function() {
        $('.temphol').hover(function() {
            $(this).children('.front').stop().animate({ "top" : '160px'}, 500);
        }, function() {
            $(this).children('.front').stop().animate({ "top" : '7px'}, 300);
        });
    });

jQueryと上記コードで動作します。画像のサイズに応じて位置を調整して下さい。

Related snippet :

  • Description: iTuneライクなスライダーを手軽なコードで実装します。IEだとちょっと微妙ですね・・・サムネイル付きで画像の切り替わりと連動してサムネイルも動きま ...
  • Description: スクロールに応じてアニメーションでサイドメニュー部分のみ追従してきます。IE6でも動作してくれるので、position:fixed;の替わりに使うの ...
  • Description: クロスブラウザで画像不使用の角丸コンテンツを実装するプラグインです。非常に軽量で使いやすいかと思います。 Sample: demo ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: オンマウスでフェードエフェクトをかけながら画像を切り替えます。cssスプライト使用。シンプルなエフェクトですが、クロスブラウザにも対応しており、目を ...
  • Description: シンプルにアニメーションするメニュー。簡単なコードで実装することが出来ます。クロスブラウザにも対応しており、ちょっとしたインパクトも与えることができ ...
  • Description: Macライクなドックメニューを実装するプラグインです。爽快なアニメーションがかわいいですね。アイコンにはキャプションも表示してくれます。クロスブラウ ...