私たちと顧客の両方を喜ばせたもの。 当然、そのような美しさは、ホバーで画像の上部に浮かんだり、画像の色を強調したりするような効果に適用されるべきでした。 技術的な実装に関して疑問が生じました。
Flashのアイデアをすぐに拒否しました。なぜなら、
1.フラッシュをよく知っているチームは誰もいません
2.デフォルトではすべてをブロックするフラッシュを使用しています。ほとんどの場合、広告（hello、Habr）
3.プラグインが必要です-マシンの95％がかかることは明らかですが、それでも
4.可能であればjs + svg / vmlでフラッシュするのはなぜですか？
SVG（通常のブラウザの場合）とVML（IEの場合はプラグインのみでSVGをサポート）でネイティブメソッドをゼロから書きたくありませんでした-ロシアの開発者Dmitry Baranovskyから優れたラファエルライブラリが見つかりました（ちなみに、彼はハブにいますが、ニックネームは覚えていません） 、Raphaelのhabrについての考察はありません）。
すべての図面の十分な速さで、レイアウト上にあったものが収集されました。これらは、この種の構造によって配置および回転されました。
var R = Raphael（ "top_sports"、665、274）; //描画用のフィールドを作成、top_sports-div id、numbers-フィールドサイズ
var img_wushu = R.image（ "wushu.png"、0、75、178、137）.animate（{rotation：2}、0）; //サイズ178x137の座標0.75で画像を作成し、2度回転します。2の後の0は、即座に回転する必要があることを意味します
ご覧のとおり、すべてが非常にシンプルで明確で美しいです。
その後、ホバリング時に写真をポップアップさせる方法についての質問が生じました。 これを行うには、小さなハンドラーをハングアップする必要がありますが、これも簡単かつ簡単に実行できます。
$（img_wushu.node）.mouseover（function（evt）{img_wushu_back.toFront（）;}）;
今、ホバリング画像がすぐに上部に表示され始めました。これは何もないよりはましですが、それでも非常にいです。 写真を徐々に上部に表示して、ユーザーに何が起こっているのかを認識させたいと思いました。 しかし、toFrontメソッドは、その軽率さで失望に陥りました...そしてもちろん、解決策が見つかりました-おそらくゲーム乙女の試みと、影響を受けたトピックに関する多くの記事を読んだことです。
画像を追加のレイヤーとして出現させ、最初にFrontに送信し、次に透明度を0から100に変更するというアイデアがありました。さらに、いくつかの小さなアクションが必要になります。
まず、スポーツごとに2つの写真を作成します。
var img_wushu = R.image（wushu_src、0、75、178、137）; //メイン画像を作成しました
var img_wushu_back = R.image（wushu_src、0、75、178、137）.hide（）。animate（{rotation：2}、0）.toBack（）。show（）; //作成、非表示、有効化、返送され、既にスムーズに使用する画像が表示されている
img_wushu.animate（{rotation：2}、0）; //メイン画像を回転します
メイン画像の回転は最後にのみ発生するため、ユーザーは2番目の画像の作成とこれに関連するちらつきを見る機会がないことが保証されます。 原則として、すべてが迅速に行われ、そのような効果に気付くことはできませんでしたが、それでも私はわずかに再保険を受けました。
今、新しいonmouseoverハンドラー（jqueryを使用）：
$（img_wushu.node）.mouseover（関数（evt）{
img_wushu_back.attr（{opacity：0}）。 //平滑化に使用される画像は完全に透明です
toFront（）。 //一番上に配置します
アニメート（{opacity：1}、500）; //そしてゆっくりと、0.5秒後にユーザーの前で具体化します
setTimeout（function（）{img_wushu.insertAfter（img_wushu_back）;}、501）;}）; //中間画像が不透明になった後、その上にメイン画像を配置します。toFrontを配置しないため、別の画像が既に上にポップアップ表示され、中間画像の上に配置されます。
それがソリューション全体です-非常に独創的であることが判明しました。 クロスブラウザ-IE6 +、Opera、FF、Safari、おそらくChromeですが、チェックインしませんでした。 別のプラスは、Opera Mobileでも機能することに注意してください。 最新のモバイルIEで動作する可能性がありますが、確認できません。
ここでは、結果の生きた例を見ることができます。
X効果を回避するためのblog.itea-lab.ruからのPSクロスポスト
updateもちろん、これを何らかの方法で自動化する必要があります。そのため、各画像の追加は1行で完了します。ラファエル用のプラグインを追加するか、少なくとも関数をラップします。 しかし、これらはすでに家庭的な些細なことであり、私たちはその過程で解決します。 :)
更新2すべて同じ、サーバーがカバーされます。 まあそう-sshでさえもさせません。 手放す方法-私は書きます。
更新3 Habrエフェクトが一時的にリリースされました。 続行できます。 ）
学校のウェブサイトへのリンクは次の投稿で提供されます。現在の例を完成させ、サイト全体を完成させ、x効果の準備を少し改善します。
Web Studio iTea Lab-ムルマンスクでのウェブサイト開発