1

このウェブサイトの目玉がどのように設計されているか知っている人はいますか? これは JavaScript (おそらく jQuery) ですか、それとも単に HTML5 と CSS ですか? その形で小さな画像を取得し、onhover メソッドを取得し、新しい画像を設定して、クリック可能にする方法がよくわかりません。これはボタンですか？

http://animalvfx.com/work/

4

3 に答える 3

6

背景として 1 つの画像を使用します (ここにあります: http://animalvfx.com/images/bg-open-close.png )。

彼らはCSSのみを使用しており、バックグラウンド位置を負のオフセットに設定するクラスにホバー状態があります。

基本的にスタイルは次のとおりです。

.slide-holder .opener {
   width: 30px;
   height: 38px;
   overflow: hidden;
   position: absolute;
   bottom: -38px;
   background: url(../images/bg-open-close.png) no-repeat;
}

.opener:hover {
   background-position: 0 -76px;
}

事実上、一度に背景画像の一部しか表示されません。画像の状態が似ているため、上を向いているように見えます。

目のクリックイベントはjQueryのスライドダウンを使用しています

物事がどのように機能するかを自分で知りたい場合は、ほとんどの一般的な Web ブラウザーで開発者コンソールを使用できます。次に、HTML インスペクタ ツールを使用して、関心のある要素を調べます。通常、開発者コンソールは F12 キーを押すとアクティブになります。これは、適切な最新の Web ブラウザー (および Firebug を備えた Firefox) で動作します。

于 2012-09-01T05:17:34.700 に答える
2

これはスプライトです - http://animalvfx.com/images/bg-open-close.png - ホバーすると、背景画像が中央の眼球からオフセットされた眼球にシフトします。

.opener:hover {
    background-position: 0 -76px;
}
于 2012-09-01T05:17:03.667 に答える
0

彼は JavaScript を圧縮したため、人間の目には判読できないと思いますが、jquery/javascript と css3 を組み合わせて使用​​していると思います。目の外観が変わるホバーは、ホバーしたときに画像を変更するための単純な JavaScript に過ぎないと思います。HTMLソースのリストでクラスの変更を確認できるため、目をクリックするとトグルクラスが使用されていることがわかります（元は に設定されていますdisplay: none）。これは間違いなくjQueryのslideDownの作業のようです。お役に立てれば ：]

于 2012-09-01T05:23:54.300 に答える