Slide content / page transition
我正在尝试重新创建他们在 gimmebar.com 上完成的内容。
当您单击图像时,当前页面的内容向左滑出并淡出。目标页面淡入并从右侧滑入。
我尝试了一些方法,例如在宽度为 200% 的容器中创建两个 div,然后滚动内容以查看和使用 JqueryUI 以及滑动 div。
滚动失败,div 根本没有移动,无论如何 srollLeft 始终为 0。
幻灯片的效果要好一些,但对我来说,它们似乎不是同时运行的。
第二个 div 只是突然出现而不是很好地滑入第一个后面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> slide demo <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <style> .container { width: 100%; float: left; height: 800px; } #one { background-color: red; } #two { background-color: #333; display: none; } </style> <script src="http://code.jquery.com/jquery-1.8.3.js"> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </head> <body> $( document ).click(function() { $("#one").hide("slide", { direction:"left" }, 1000); $("#two").show("slide", { direction:"left" }, 1000); }); </body> </html> |
看起来应该很容易实现,但我被卡住了。
保重。
编辑:
正如你在这个小提琴中看到的那样,我有点让它工作。
幻灯片在那里,但我看不到任何褪色。
也可能有更好的方法来实现这一点,但我很满意不必加载第三个库/插件只是为了滑动 div。
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
找到了由他们的开发人员编写的教程。认为这可以算作解决方案。
纯javascript解决方案:在CSS中:
1 2 3 | div.wrap {visibility: hidden; position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%} div.wrap div.newContent {visibility: visible; position: relative; left: 100%;} |
在 HTML 中:
1 2 3 4 5 | This is the content that is initially displayed Put the content you want to be revealed here |
newContent div 最初是隐藏的,因为它的左边缘在其父(环绕)div 的右边缘,并且 CSS 告诉浏览器隐藏任何溢出父 div 的内容。
然后为了显示隐藏的内容设置一个计时器,逐渐将内部 div 的
我建议您使用我不久前在网站上使用的这个 jQuery 脚本,它的作用就像一个魅力,它被称为 CODA SLIDER,它是由 Kevin Batdorf 制作的,安装它只有 5 行代码。
祝你好运