javascript - 一种让页面从任何方向滑入和滑出的方法

Question

我有一个页面，其中包含div分布在整个网站上的不同标签（高度和宽度 = 100%）

其中一个是一次可见的，它们应该在操作时相互替换（单击一个按钮左右）。

我正在寻找一个脚本或插件，可以让我滑出并同时滑入另一个div.

即 div1 存在，我单击一个按钮，现在 div1 向左滑出，同时 div2 从右侧滑入。

我尝试了几件事，包括 jQuery 的动画、slideToggle、Toggle..

Answer 1

查看此演示，看看它是否可以在没有 JavaScript 的情况下解决您的问题：http: //www.designmadeingermany.de/slideshow/

/* The Basic Style for all Pages */

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}



/* The Pages */

#i1 { left: 0%; background-color: #fff; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; background-color: #bbb; }
#i3 { left: 300%; background-color: #777; }



/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}



/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); transform: translateX(-300%); }



/* The First Page - Initial Positioning without Anchor */

.page { 
-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
}