5

私はウェブサイトを作成しています。ページの下部にあるボタンをクリックすると、別のレイアウトの新しい .html ファイルに移動するようにしたいのですが、その新しいページがスライドしているように見せたいです。クールなトランジションのように見えるようにします。

次に例を示します。

<!DOCTYPE html>
<html>
<body>

    <p>Create a link of an image:
        <a href="default.asp">
            <img src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>

    <p>No border around the image, but still a link:
        <a href="default.asp">
            <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32">
        </a>
    </p>
</body>
</html>

画像をクリックすると新しいページに移動するようにする必要がありますが、その新しいページに移動すると「スライドアップ」遷移が発生します。

ありがとう！

4

4 に答える 4

3

iFrame を使用してこれを実現できます。

JS フィドルのデモ

遷移効果にはjQuery Transitを使用しました。

$("#myLink").click(function () {
    $('#newPage').transition({top: '0%' });
});
于 2013-05-06T17:37:55.240 に答える
0

私はこのようなものを使用して成功しました: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

iframe唯一の問題は、新しいページの短いフラッシュが表示され、その後消えてから遷移する場合があることです。これは、 s または同様のもの (私が一般的に嫌うもの)を使用しない限り、多かれ少なかれ避けられません。

于 2013-05-06T17:50:52.213 に答える
0

coda スライダーによく似た垂直スライダーのようなものを実装することもできますが 、これは垂直スクロール用に開発されています。デモ。

この種のトランジションをページ全体に作成しようとしましたが、難しいことがわかりました。（でも私はJQ N00Bです）

マジック スライダー水平および垂直スクロールを提供し、実装がより簡単になる可能性があります。

また、必要なものに対する簡単な解決策になるかもしれないthis (チュートリアルはこちら) もご覧ください。

実際、この最後のものはあなたが望むものに最も近いと思います

于 2013-05-06T18:15:01.943 に答える