Sliding An Entire Web Page

前端 未结 10 2033
南笙
南笙 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:34

    Try JQuery Cycle plugin.

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

    They have provided lot of sample code and tutorials, so it is easy for you to build it your own way.

    0 讨论(0)
  • 2020-12-09 00:37

    I am currently developing something that may be useful to you. It uses the side by side divs you considered but I found difficulties in using 100% width due to issues with the scrollbars and differences in the browsers. I have overcome this by setting the widths in javascript (jQuery) which offers a cross-browser solution (tested in IE7, IE8, FF, Chrome, Safari, Opera).

    Feel free to take as much of the source code as you like by inspecting the source and if you need me to talk you through anything, just let me know.

    http://madesignuk.com/uploader/

    PS I'm not 100% sure on the rules regarding posting the link to my personal site so if it is an issue for moderators, please let me know.

    PPS The site is in development so please try not to mock me :p

    0 讨论(0)
  • 2020-12-09 00:39

    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?

    0 讨论(0)
  • 2020-12-09 00:39

    jQuery pageSlide is an other alternative.

    0 讨论(0)
  • 2020-12-09 00:41

    The Google Chrome Team made 20 Things I Learned About Browsers and the Web which has this effect.

    0 讨论(0)
  • 2020-12-09 00:42

    Just as a theoretical example, but I would create static HTML pages and use jQuery to load the content from them (to provide compatibility). The main problem would be the scrolling.

    I use jQuery to calculate the width of the browser, set that to be the width of the <body>, and then set overflow: hidden. Then, just create an absolutely positioned content box, and slide both of them at once.

    I'll post some code later, but this is what I would begin with (I, being a pathetically incompetent JS fiddler).

    0 讨论(0)
提交回复
热议问题