7

有没有一种方法可以模仿你在 iPhone 上看到的“滑动整个页面”的原生转换和功能，但在网络浏览器中？

我想要一个 HTML 页面滑过，一个新的 HTML 页面在按下按钮后取代它。

按钮不能保持不变。因此，如果您有一个恒定的标题，其中包含在框内滑动内容的按钮，那将是不正确的。我需要滑动整个网页。

我需要用 HTML5 制作的幻灯片吗？预先感谢您的任何帮助！

编辑：我也一直在考虑可能并排设置两个全尺寸的 DIV，其中一个隐藏在页面外，使用“溢出：隐藏”，然后使用 CSS 过渡点击一个按钮，然后将一个 DIV 移出屏幕，然后另一个进入视野，但我不知道该怎么做。

另一个真正困难的部分是我的 DIV 容器需要是动态的并且 100% 的宽度和高度。我不能使用固定尺寸。

编辑：

使用Ariel Flesler开发的 scrollTo 和 localscroll 函数，我已经能够完成 99% 的任务。然而，在开发的最后阶段，我遇到了一个巨大的障碍。这是一张图片，我希望它有助于解释我正在尝试做的事情：

替代文字

我的问题是主要内容区域是一个固定位置，带有一个自动溢出功能，这样我就可以将 DIV 的滚动条保持在页眉和页脚之间。但问题是，当我通过点击按钮启动 DIV 的滑动动画时，固定内容区域不会移动，只有页眉和页脚移动。如果我将主要内容区域的定位更改为“相对”，那么一切都会按照我的意愿移动，但我会失去滚动的定位。

如果有人能弄清楚这一点，我将非常感激你！

（我会发布我拥有的链接，但我不能。这是公司的机密工作）

先感谢您！！

编辑 我正在审查所有这些信息。我会在几天内回复。谢谢大家的输入！

4

9 回答 9

6

我目前正在开发一些可能对你有用的东西。它使用您考虑过的并排 div，但由于滚动条的问题和浏览器的差异，我发现使用 100% 宽度有困难。我通过在提供跨浏览器解决方案的 javascript (jQuery) 中设置宽度来克服这个问题（在 IE7、IE8、FF、Chrome、Safari、Opera 中测试）。

通过检查源代码，随意获取尽可能多的源代码，如果您需要我与您讨论任何事情，请告诉我。

http://madesignuk.com/uploader/

PS 我不是 100% 确定关于将链接发布到我的个人网站的规则，所以如果它是版主的问题，请告诉我。

PPS 该网站正在开发中，所以请尽量不要嘲笑我：p

于 2010-12-17T08:40:54.903 回答
4

您可以通过将元素并排放置在带有 的容器中来做到这一点overflow:hidden，并且只需移动内部元素。

这是一个概念证明。它不处理页面加载后的大小调整，但它至少显示了原理。我在容器中放了三张幻灯片，但代码是动态的，因此您可以放置​​任何您喜欢的数字。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>

<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="Header">
  absolutely positioned header
</div>

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

    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

  </div>
</div>

<div class="Footer">
  absolutely positioned footer
</div>

</body>
</html>

编辑

现在 jsfiddle 又起来了，所以你可以在这里试试：jsfiddle.net/9VttC

于 2010-12-24T12:32:42.317 回答
1

使用scrollTopCSS 属性：你想在你的主要内容区域向下滚动 100px 吗？这样做：

var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

第二行由 jQuery 组成，但只要记住原理：将新的 scrollTop 值影响到 main_content_area div 的 CSS。

于 2010-12-18T14:30:49.970 回答
1

你看过LocalScroll吗？它将使所有哈希链接在您定义的容器内可滚动。不过，您必须设置幻灯片的宽度，因为您需要浮动它们。

于 2010-12-15T00:33:44.510 回答
0

If I understand correctly, the scrollTo method works, but only if you change the position:fixed to position:relative, which has the consequence of making the scrollbar stretch beyond the scrolling div?

Wouldn't it be easier to put a wrapper div around your main content area with a top margin to account for the header and a bottom margin to account for the footer, and set it to have overflow:scroll, and to use the scrollTo function within it?

于 2010-12-17T21:44:44.240 回答
0

试试 JQuery Cycle 插件。

http://jquery.malsup.com/cycle/

他们提供了许多示例代码和教程，因此您可以轻松地以自己的方式构建它。

于 2010-12-17T08:28:22.987 回答
0

Google Chrome 团队制作了我学到的关于浏览器和网络的 20 件事，具有这种效果。

于 2010-12-17T21:54:05.903 回答
0

只是作为一个理论示例，但我会创建静态 HTML 页面并使用 jQuery 从其中加载内容（以提供兼容性）。主要问题是滚动。

我使用 jQuery 计算浏览器的宽度，将其设置为 的宽度<body>，然后设置overflow: hidden. 然后，只需创建一个绝对定位的内容框，并同时滑动它们。

我稍后会发布一些代码，但这就是我要开始的内容（我是一个可悲的无能的 JS 提琴手）。

于 2010-12-17T21:54:19.357 回答
-1

您可以使用Coda Slider之类的东西，并让幻灯片的内容成为整个页面。

于 2010-12-09T21:13:11.460 回答