HTML5頁面滑動問題

Question

下面的代碼通過滑動DIV的內容來工作，但是我想要的是，如果用戶在第一頁上並單擊鏈接，它將把他完整地滑到第二頁，反之亦然。 任何幫助將不勝感激。 謝謝

頁面幻燈片

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });

  var pos = 0;

  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });

});

</script>

<style type="text/css">

body { margin: 0; padding: 0; }

.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }

.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }

.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }

</style>

</head>
<body>


<div class="SlideContainer">
  <div class="Slides">

    <div class="Slide">
      <div class="Content">
        <h1>I am on the First Page</h1>
        <a href="secondpage.html" class="Left">Slide Me to Secondpage</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>I am on the second page</h1>
        <a href="firstpage.html" class="Left">Slide Me back to First Page</a>

      </div>
    </div>



  </div>
</div>


</body>
</html>

Answer 1

您要做的是，當用戶想要轉到第2頁時，您將進行Ajax調用以呈現第2頁，並將其放置到屏幕外的div中，然后滑動，刪除上一頁（或留回上一頁，以防他們退回）並在右側添加一個新的div。 唯一的缺點是，由於您沒有創建回發，因此您可能必須維護自己的歷史記錄並攔截“后退”按鈕。

Answer 2

這里的問題是您重定向頁面，您將不得不拿走secondPage.html上的內容，並基本上通過CSS為您的網頁制作一個長頁面，因此當您單擊以滑動到下一頁時，它會滑動而不是重定向您。

或像@Christopher White所說的那樣撥打一些Ajax電話。 （避免您制作需要較長加載時間的大型頁面）

Ajax可能會像這樣：

 $.ajax({
    url: '/path/to/test2.html',
    type: 'default GET (Other values: POST)',
    dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
    data: {param1: 'value1'},
})
.done(function() {
    console.log("success");
    //Put your go to page function here ie switch to page 2 
})
.fail(function() {
    console.log("error");
    //something went wrong, what should it do?
})
.always(function() {
    console.log("complete");
    //This will ALWAYS happen whether you get a failure or a success
});

查看http://api.jquery.com/jquery.ajax/，了解一些主要示例，以及有關ajax調用的用法/說明。

HTML5頁面滑動問題

問題描述

2 個解決方案

解決方案1
2 2014-11-13 21:01:56

解決方案2
0 2014-11-13 21:03:37

HTML5頁面滑動問題

問題描述

2 個解決方案

解決方案1 2 2014-11-13 21:01:56

解決方案2 0 2014-11-13 21:03:37

解決方案1
2 2014-11-13 21:01:56

解決方案2
0 2014-11-13 21:03:37