文章/答案/技术大牛

发布

问Html5页面滑动问题
EN

Stack Overflow用户

提问于 2014-11-14 04:54:29

回答 2查看 182关注 0票数 0

下面的代码通过滑动DIV的内容来工作，但我想要的是，如果用户在第一页并单击链接，它会将他滑到第二页，反之亦然。任何帮助都将不胜感激。谢谢

             Page Slide

<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>

javascript

html

回答 2

Stack Overflow用户

发布于 2014-11-14 05:01:56

当用户想要转到第2页时，您可以调用Ajax来呈现第2页，并将其置于屏幕外的div中，然后滑动，删除前一页(或保留它以防他们返回)，并在右侧添加一个新的div。这样做的唯一缺点是，由于您不是在创建回发，因此您可能必须维护自己的历史记录并截取back按钮。

票数 2

Stack Overflow用户

发布于 2014-11-14 05:03:38

这里的问题是你重定向页面，你将不得不使用你在secondPage.html上的任何东西，基本上通过css为你的网页制作一个长页面，所以当你点击滑动到下一个页面时，它会滑动而不是重定向你。

或者像@Christopher怀特所说的那样进行一些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
});

有关ajax调用的一些主要示例和用法/解释，请查看http://api.jquery.com/jquery.ajax/。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26918212

复制

相似问题

问Html5页面滑动问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Html5页面滑动问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Html5页面滑动问题
EN