0

現在のページ/ホームページの上に開きたい4ページのコンテンツがあります。これらのページはすべてスライドインする必要があります。たとえば、about us をクリックするとスライドインし、別のリンクをクリックすると前のページがスライドアウトし、新しいページがスライドインします。ホームページのリンクをクリックすると、ロードされたページがスライドアウトする必要があります。

ここにイラストを追加しました

図

これが私が立ち上げようとしているサイトhttp://www.beautydishphotography.comです。

現在、すべてのリンク コンテンツは、ページ自体に存在する DIV から読み込まれています。外部 HTML ファイルでそれらを取得しようとしており、メニュー ボタンをクリックするとスライド イン/アウトして読み込まれます。

これが私の現在のHTMLコードです。

<html>
<head>
    <title>Test Div</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <nav> 
    <div id='menu'> 
    <a href='#'><img src='img/Navigation/home.png' title='Home' alt='' /></a>
    <a href='aboutus.html'><img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' /></a> 
    <a href='portfolio.html'><img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' /></a>
    <a href='contactus.html'><img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /></a>
     </div>
  </nav>
  <div style="clear:both"></div>
  <div id="externalPage" style="height:900px; width:900px; background-color:#999; display:none;">Contact Us</div>
</body>
</html>

また、外部の .html ファイルをロードするために必要な #externalPage div も配置しました。

私はjQueryに非常に慣れていないため、作成するのに本当に苦労しています。どうすればいいのか教えてください。

4

1 に答える 1

2

コンテンツを画面外または非表示にロードしてから、所定の位置にロードdivし.animate()ますdiv。それに応じてクラス名を変更することもできます。これにより、持ち込んだ にすべてのスタイルが適用されますdiv。

GitHub の人々は、しばらく前にそのアイデアを実装しました: https://github.com/blog/760-the-tree-slider

于 2013-06-06T16:46:59.600 に答える