Question

我有一个页面，其中包含遍布整个网站的不同div标记（高度和宽度= 100％）

其中一个是可见的，他们应该在行动时互相替换（点击按钮左右）。

我正在寻找一个允许我滑出并同时在另一个div中滑动的脚本或插件。

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

我尝试了几件事，包括jQuery的animate，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%);
}

让页面从任何方向滑入和滑出的方法

1 个答案: