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 个答案: