HTML5 for iPhone/iPod Touch的Coverflow
我必须做一个预定用于iPhone和iPod-touch的网页，它需要在页面中加入Coverflow风格的苹果，以显示视频列表。HTML5 for iPhone/iPod Touch的Coverflow
我听说过一些有用的小玩意儿，但我找不到任何相关的东西，或者可以正确使用iPhone/iPod-Touch导航。
任何人都知道可以帮助我入门的东西吗？
感谢 -Stephanie
这可以帮助你：http://paulbakaus.com/2008/05/31/coverflow-anyone/
虽然它似乎并不认为有做任何正式的方式，因为CSS转换唯一的全二维矩阵，所以你不能得到一个梯形形状。
这是一个跨浏览器实现的Cover Flow的：http://luwes.co/labs/js-cover-flow/
主要模式工作在HTML5（JavaScript的/ CSS）并且它在Flash中对旧版浏览器有一个回退。它支持手机，你可以用简单的滑动手势翻阅封面。
测试上：Safari浏览器，浏览器，火狐，歌剧，IE8 +，的iPad，iPhone
你可以试试这个，我已经为iOS设备开发的。触摸手势已启用。 http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
孤独的链接[被认为是一个不好的答案]（http://stackoverflow.com/faq#deletion），因为它本身毫无意义，并且目标资源在将来不保证活着。 [这将是最好的]（http://meta.stackexchange.com/q/8259）在这里包括答案的基本部分，并提供链接供参考。 – j0k 2012-10-02 14:13:39
你可以找到吨的CoverFlow样本的谷歌 但所有，我发现样品过于复杂（大量的文件或难以实现），他们不给我一直在寻找 ，所以我决定创建的CoverFlow
1.-减档
2：容易实现
3。 - 与WebKit的（Safari浏览器，Safari浏览器手机和Chrome）作品
，我要展示的代码是只给你的你能对你的项目做一个线索
这是一个非常简单的样本，只显示你的基本 它不是一个最终的工作
这CoverFlow的工作原理与输入范围（滑块） 和多数民众赞成
当你的CoverFlow的是如何工作的想法 你将能够添加更多功能cli中正，触摸，翻盖....
最后这里是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CoverFlow</title>
<style>
html { height: 100%; }
body { background-image: -webkit-radial-gradient(gray 0%, black 100%); }
#coverflow {
width: 800px;
height: 400px;
overflow: hidden;
margin: 100px auto;
-webkit-perspective: 500;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transform-style: preserve-3d;
}
#container {
height: 100%;
width: 100%;
margin-left: 350px;
background-color: transparent;
-webkit-transition: all 400ms ease-in-out;
}
.holder {
float: left;
position: absolute;
margin-top: 100px;
margin-left: 20px;
-webkit-transition: all 300ms ease-in-out;
-webkit-box-reflect: below 4px
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255, 255, 255, 0)),
color-stop(.5, rgba(255, 255, 255, .3)),
color-stop(1, rgba(255, 255, 255, .3))
);
}
.slider {
position: absolute;
width: 200px;
height: 30px;
margin: 0 0 0 430px;
-webkit-appearance: none !important;
border-radius: 6px;
border: 1px solid white;
background: #999;
opacity: .5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 50px;
height: 18px;
border-radius: 8px;
border: 2px solid #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #999), color-stop(.5, #000));
}
#log { color: white; font-size: 30pt; }
</style>
</head>
<body onload="flow()">
<div id="coverflow">
<div id="container">
<div class="holder" id="1"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="2"><img src="../img/2.jpg" width="200"></div>
<div class="holder" id="3"><img src="../img/3.jpg" width="200"></div>
<div class="holder" id="4"><img src="../img/4.jpg" width="200"></div>
<div class="holder" id="5"><img src="../img/5.jpg" width="200"></div>
<div class="holder" id="6"><img src="../img/6.jpg" width="200"></div>
<div class="holder" id="7"><img src="../img/7.jpg" width="200"></div>
<div class="holder" id="8"><img src="../img/8.jpg" width="200"></div>
<div class="holder" id="9"><img src="../img/9.jpg" width="200"></div>
<div class="holder" id="10"><img src="../img/1.jpg" width="200"></div>
<div class="holder" id="11"><img src="../img/2.jpg" width="200"></div>
</div>
</div>
<input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();">
<a id="log">value</a>
<script>
function flow() {
var space = 2;
var coverCount = 11;
var current = slider.value;
var cover = document.getElementById(current + "");
var position = [0, 230, 180, 130, 80, 30, -20, -70, -120, -170, -220, -270];
for (var i = current; i < (coverCount +1); i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i+space)*50)+"px,0,-10px) rotateY(-65deg)";
document.getElementById(i + "").style.zIndex = -i + "";
}
for (var i = 1; i < current; i++)
{
document.getElementById(i + "").style.webkitTransform = "translate3d("+((i-space)*50)+"px,0,-10px) rotateY(65deg)";
document.getElementById(i + "").style.zIndex = i + "";
}
cover.style.webkitTransform = "translate3d("+(slider.value*50)+"px,0,100px) rotateY(0deg)";
cover.style.zIndex = current + "";
document.getElementById("container").style.marginLeft = position[current] + "px";
document.getElementById("log").innerHTML = slider.value + "";
}
</script>
</body>
</html>
我知道你可以找到很多更好的coverflows的，这只是分享
只记得更换图像和/或名称
的路径希望它可以帮助
好运
是的，我看到dashcode可以帮助轻松添加更复杂的元素，但不幸的是，似乎没有什么指向甚至接近覆盖流的东西。我会深入了解一下，也许我可以找到一些能让我的DA满意的东西。谢谢。 – Stef 2010-04-19 12:09:21