-5

このウェブサイトからいくつかのものをエミュレートしたいと思います - http://worldwildlife.org/species

動物の写真にマウスを合わせると、とてもクールなオーバーレイが表示されます。それは単なる通常の HOVER ですか、それともそれ以上のものですか? どういうわけか、私には少し派手でアニメーションに見えるので、代わりに jQuery 効果だと思っていました。とにかく、一方が他方よりも優れていますか？質問がばかげている場合は申し訳ありませんが、この部分についてあまり知識がありません。

モバイル版を作成する際に、ホバー タイプのエフェクトを処理する最善の方法は何ですか?

本当にありがとう！

4

3 に答える 3

1

カイルが言ったように、このタスクを実行するには多くの方法があります。最も簡単な (そして最もブラウザーに準拠した) 方法は、単純な jQuery ホバー効果を実行することでしょう。画像をホバーすると、別の画像が表示され、その上にフェードします。もちろん、2 番目の画像は透過 PNG である可能性が高く、元の画像が変形しているように見えます。

jQuery にはこれの多くの実装があります。簡単な Google 検索を行うと、いくつかの結果が得られます。たとえば、いくつかのSO投稿を次に示します。

編集＃2

おっと、オーバーレイではなくスワップのリンクを投稿しました。オーバーレイも非常に簡単に実行できます。これらのリンクは次のとおりです。

JQuery マウスオーバー画像オーバーレイ

編集

この StackOverflow の回答では、jQuery の代わりに CSS3 を使用しています。ただし、コメンターが指摘したように、要件によっては、サポートする必要があるブラウザーでこれが機能しない場合があります。

2 番目の質問であるモバイル環境についてですが、サイトのモバイル バージョンではホバー効果を除外することをお勧めします。そうすれば、モバイル デバイスでの UI 効果よりもはるかに重要な、コンテンツのみを配信することに集中できます。それでも何らかの効果が必要な場合は、iOS/Android/WP8/etc のユーザー エージェントを検出し、ホバー効果を代わりにa:active画像リンクの効果にすることができます。

于 2013-06-22T03:01:52.690 に答える
1

これは、CSS だけを使用して行うことも、jQuery を使用してより凝った効果を得ることができます。しかし、CSS トランジションとアニメーションは非常に優れており、JavaScript をまったく必要とせずに多くのことを実現できます。

于 2013-06-22T02:54:36.090 に答える
0

他の人が指摘したように、jQuery を使用して、ここで達成したいことを達成できます。
JavaScript を入力せずに CSS のみのソリューションを探している場合は、古いブラウザーのサポートを除外することを犠牲にして、ここにソリューションがあります: http://jsfiddle.net/JtKR5/5/

#img-holder{
    position:relative;
    display:inline-block;

}

#img-holder:hover:after {
    font-family:verdana;
    content:"Overlay Content";
    color:white;
    background-color:rgba(0,0,0,0.5);
    top:0;
    left:0;
    position:absolute;
    box-sizing:border-box;
    padding-top:150px;
    text-align:center;
    width:100%;
    height:100%;
    -webkit-animation:trans 300ms;
    transition:trans 300ms;
}

@-webkit-keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

@keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

これらのトランジションがホバーベースであることを考えると、モバイルの使用に関する2番目の質問に答えるには、いくつかのオプションがあります。

  • autibyte が指摘したように、 :active を使用できますが、ここでの問題は、ユーザーが画像をクリックして :active 疑似セレクターから指を離すと、非アクティブ化され、そこに遷移し、画像が続く限りすべてが発生することですクリックされます。これは通常、ほんの一瞬です
  • jQuery を使用してクリックをキャプチャし、それに応じてオーバーレイのオン/オフを切り替えます
  • モバイルユーザーを検出し、ホバーすることでユーザーに提供される情報を画像の下/周囲にプッシュするため、ホバー/クリックの必要がなくなります。
于 2013-06-22T05:16:07.720 に答える