发表新帖
发表新帖

Sliding An Entire Web Page

前端 未结
关注
10 2034
南笙
南笙 2020-12-09 00:14

Is there a way to mimic the native transition and functionality of \"sliding entire pages\" like you see on the iPhone but inside a web browser instead?

I want one H

相关标签:
10条回答
  • 一向
    2020-12-09 00:43

    You could use something like Coda Slider, and have the content of the slide be the whole page.

    0 讨论(0)
  • 感情败类
    2020-12-09 00:45

    Have you looked at LocalScroll? It will make all hash links scrollable within the container you define. You would have to set the width of slides though, as you'll need to float them.

    0 讨论(0)
  • 误落风尘
    2020-12-09 00:52

    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 讨论(0)
  • 遇见更好的自我
    2020-12-09 00:55

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

    Edit

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

    0 讨论(0)
 看不清?
提交回复
热议问题