1

メイン メニューのリンクをクリックすると、この Web サイトはどのような種類の遷移 (遷移の場合) を行いますか?

http://ivalladare7.wix.com/testepi#!home/mainPage

これは単なるテストですが、アイデアは明確だと思います。HTML5 ですか、CSS ですか、それとも jQuery/JavaScript ですか?

いくつかの場所で見ましたが、例を見つける方法がわからないため、実装方法がわかりません。

どんな助けでも大歓迎

4

4 に答える 4

1

HTML の構造は、一見難しそうに見えます。どの遷移 (?) を意味するのかわかりませんが、メニューをクリックしたときにスライドするコンテンツだと思います。

最初は、アドレス バーのサイト URL にトレイルを追加するため、何らかの Javascript (jQuery である可能性が最も高い) ではないかと疑っています。<a>次に、(Chrome の inspect 要素を使用して) ソースを表示しようとしましたが、メニューに要素がないことがわかりました。私はこれだけを見つけました：

<p skinpart="label" class="wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1-label" style="line-height: 25px; width: auto; ">Articles&nbsp;&amp;&nbsp;Videos</p>

次に、それを確認するために、ブラウザで Javascript を無効にします。スライド コンテンツが機能しなくなります。だから、ええ、それはJavascriptです。

編集：

実際、ソースを直接表示しようとすると (Ctrl+U)、Javascript の行がたくさん見つかります。テキストを Ctrl+F しようとするとHome、Javascript の行内に表示されます。したがって、これは確かにJSです。

于 2012-10-18T10:48:31.193 に答える
1

これは CSS トランジションです (Webkit のみであるため、あまり良いものではありません)。ベンダー プレフィックスを使用したより良いバージョンは次のようになります。

.menu a {
    color: #999;
            transition: color 0.4s ease; /* vendorless fallback */
         -o-transition: color 0.4s ease; /* opera */
        -ms-transition: color 0.4s ease; /* IE 10 */
       -moz-transition: color 0.4s ease; /* Firefox */
    -webkit-transition: color 0.4s ease; /*safari and chrome */
}

.menu a:hover {
    color: #340065;
}

スライド コンテンツを意味する場合、それは Javascript です。

于 2012-10-18T10:42:50.587 に答える
0

CSSトランジションのようです。

ルールが表示された場合:

.wysiwyg_viewer_skins_dropmenubutton_TextOnlyMenuButtonNSkinddm1 {
-webkit-transition: color 0.4s ease 0s;
}

しかし、http: //css3generator.com/でより良いものを入手できます。

トランジションを選択し、そのツールを使用します。よりクロスブラウザなものを手に入れるのに役立ちます。

于 2012-10-18T10:41:48.430 に答える