当前位置：文江博客话题详情

滑动整个网页

发布于 2024-10-07 12:18:58 字数 1020 浏览 0 评论 0原文

有没有一种方法可以模仿“滑动整个页面”的本机转换和功能，就像您在 iPhone 上看到的那样，但在网络浏览器中？

我希望在按下按钮后滑过一个 HTML 页面并替换一个新的 HTML 页面。

按钮不能保持不变。因此，如果您有一个带有将内容滑动到框中的按钮的常量标题，那么这将是不正确的。我需要滑动整个网页。

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

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

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

编辑：

使用Ariel Flesler<开发的scrollTo和localscroll函数< /a> 我已经能够完成 99% 的我正在寻找的事情。然而，在开发的最后阶段，我遇到了巨大的障碍。这是我希望有助于解释我想要做的事情的图像：

alt text

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

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

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

提前谢谢您！

编辑我正在努力审查所有这些信息。我将在几天内回复。感谢大家的投入！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一指流沙 2024-10-14 12:18:59

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

回复收藏 0 原文

━╋う一瞬間旳綻放 2024-10-14 12:18:58

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

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

http://madesignuk.com/uploader/

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

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

回复收藏 0 原文

摇划花蜜的午后 2024-10-14 12:18:58

您可以通过将元素并排放置在带有 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">«</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">«</a>
        <a href="#" class="Right">»</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">»</a>
      </div>
    </div>

  </div>
</div>

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

</body>
</html>

编辑

现在 jsfiddle 又上线了，所以你可以在这里尝试一下： jsfiddle.net/9VttC

You can do that by placing elements side by side inside a container with overflow:hidden, and just move the inner elements.

Here is a proof of concept. It doesn't handle resizing of the page after it has loaded, but it at least shows the principle. I have put three slides in the container, but the code is dynamic so that you can place any number you like.

<!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">«</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">«</a>
        <a href="#" class="Right">»</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">»</a>
      </div>
    </div>

  </div>
</div>

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

</body>
</html>

Edit

Now jsfiddle is up again, so you can try it out here: jsfiddle.net/9VttC

回复收藏 0 原文

小帐篷 2024-10-14 12:18:58

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

回复收藏 0 原文

女中豪杰 2024-10-14 12:18:58

使用 scrollTop CSS 属性：您想在主要内容区域中向下滚动 100 像素吗？
只需这样做：

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

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

Use the scrollTop CSS attribute : you want to scroll down 100px in your main content area ?
Just do that :

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

The second line is made up with jQuery, but just remember the principle : affect the new scrollTop value to your main_content_area div's CSS.

回复收藏 0 原文

玩心态 2024-10-14 12:18:58

尝试 JQuery Cycle 插件。

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

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

回复收藏 0 原文

你的背包 2024-10-14 12:18:58

如果我理解正确的话，scrollTo 方法可以工作，但前提是您将position:fixed 更改为position:relative，这会导致滚动条超出滚动div 的范围？

在主要内容区域周围放置一个包装器 div，并使用上边距来考虑页眉和下边距来考虑页脚，并将其设置为具有溢出：滚动，并使用scrollTo函数，不是更容易吗？其内？

回复收藏 0 原文

茶底世界 2024-10-14 12:18:58

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

回复收藏 0 原文

﹂绝世的画 2024-10-14 12:18:58

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

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

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

回复收藏 0 原文

~没有更多了~

关于作者

許願樹丅啲祈禱

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

滑动整个网页

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

编辑

Edit

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

滑动整个网页

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

编辑

Edit

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。