1

私はページを持っているとしましょう：

test1.html test2.html test3.html

そして、test1.htmlをtest2.htmlに、test1.htmlをtest3.htmlにリンクしたい

ページ アンカーと iframe を使用すると、test1 から test3 に移動するときに、test2 もスクロールするという問題がありました。

jquery mobile page transitions ( http://jquerymobile.com/demos/1.0/docs/pages/page-transitions.html )と呼ばれるクールなものを見つけましたが、毎回ページを読み込めないと表示されます。しかし、これはまさに私が欲しいものです。作成するボタン/リンクごとに異なるページ遷移 (上、左、下などのスライドを選択できます)。

CSSでこれを行う方法があれば、それは素晴らしいことです!

4

2 に答える 2

1

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ こちらをご覧ください スライドダウンで ajax を使ってロードする 少し作業できますこのチュートリアルでは、ページ全体をドロップダウンまたはフェードインとしてロードします。CSSだけでは無理だと思います。

于 2013-06-11T21:22:35.267 に答える
1

正確なコードではありませんが、開始する必要があります。

$(document).ready(function(){
  $('body').fadeIn();

  $('a').click(function(e){
    window.goto=$(this).attr("href");
    $('body').fadeOut('fast',function(){
      document.location.href=window.goto;
    });

    e.preventDefault();
  });
});

CSS:

body{display:none;}

要素の高さを知る必要がある他の jQuery プラグインを使用している場合は、fadeIn が完了するまで要素に高さがないため、破損する可能性があることに注意してください。display:none の代わりに visible:hidden を使用して最初の非表示を行うことで、これを回避できる場合があります。

于 2013-06-11T21:35:07.540 に答える