与HTML5/CSS3图像堆栈
问题描述:
我知道有很多例子,但本质上没有通常参与,一个人如何可以使用新的HTML5 + CSS3
风格做一个图像堆栈中的任何垃圾,那就是:与HTML5/CSS3图像堆栈
- 唯一的单张影像显示当时的一些事件(例如鼠标按下;循环)后显示在前面的图像
- 下一个图像
我想知道如何使用新HTML5/CSS3
风格做这个简单的事?
答
我发现一个幻灯片的很好的例子,如果这就是你正在寻找的东西,没有太多的额外内容。一个显示下一张照片的计时器和另一个更改背景的计时器。
两个CSS3的解决方案和每步好的一步的教程
Timed slideshow (box)
Timed slideshow (background)
我希望我没有误解你的问题。
答
个人而言,我会使用jQuery周期 - http://jquery.malsup.com/cycle/
<div id="shuffle" class="pics">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
</div>
$('#shuffle').cycle({
fx: 'fade',
delay: -4000
});
我不知道有一个HTML5/CSS3方法,这是诚实的。它只是常规的CSS,因为你所做的只是将容器设置为图像尺寸,然后将每个图像设置为绝对定位,以便将它们“堆叠”在一起。然后循环遍历所有动画。
你可以使用CSS3转换,但你在你的问题中提到了jQuery,所以Cycle是你最好的选择。
+0
似乎他接受了我的编辑,它变成了CCS3 – Liquid 2012-07-13 07:34:11
答
这是最好的,我曾经发现
.stack { position: relative; z-index: 10; }
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
你想图像的幻灯片? – Liquid 2012-07-12 09:18:58
如果你想使用jQuery,我不认为这真的是一个HTML5/CSS3问题。 – SpaceBeers 2012-07-12 09:28:38
^最后一行说这个@SpaceBeers'我想知道如何使用新的HTML5/CSS3样式做这个简单的事情。'# – Liquid 2012-07-12 09:38:22