Html 适用于 iPhone/iPod Touch 的 HTML5 中的 Coverflow
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2662873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Coverflow in HTML5 for iPhone/iPod Touch
提问by Stef
I have to do a web page destined for iPhone and iPod-touch that needs to incorporate the Coverflow style of apple in a page to display a list of videos.
我必须做一个面向 iPhone 和 iPod-touch 的网页，需要在页面中加入苹果的 Coverflow 风格来显示视频列表。
I've heard something about gizmos that could help, but I can't find anything relevant or that could work properly with the iPhone/iPod-Touch navigation.
我听说过一些可以提供帮助的小玩意儿，但我找不到任何相关的或可以与 iPhone/iPod-Touch 导航一起正常工作的东西。
Anyone knows something that could help me getting started?
任何人都知道可以帮助我入门的东西吗？
Thanks -Stephanie
谢谢-斯蒂芬妮
回答by ideotop
Try ContentFlow: http://www.Hymansasylum.eu/ContentFlow/
尝试 ContentFlow：http: //www.Hymansasylum.eu/ContentFlow/
Here is an example that is working on my iPhone : http://www.majes.fr/
这是在我的 iPhone 上运行的示例：http: //www.majes.fr/
回答by Vijay Krishna
回答by luwes
This is a cross-browser implementation of Cover Flow: http://luwes.co/labs/js-cover-flow/
这是 Cover Flow 的跨浏览器实现：http: //luwes.co/labs/js-cover-flow/
The primary mode works in HTML5 (JavaScript/CSS) and it has a fallback for older browsers in flash. It supports mobile, you can flip through the covers with a simple swipe gesture.
主要模式在 HTML5 (JavaScript/CSS) 中工作，它在 Flash 中为旧浏览器提供后备。它支持移动设备，您可以通过简单的滑动手势来翻页。
Tested on: Safari, Chrome, Firefox, Opera, IE8+, iPad, iPhone
测试：Safari、Chrome、Firefox、Opera、IE8+、iPad、iPhone
回答by Rich Bradshaw
This might help you: http://paulbakaus.com/2008/05/31/coverflow-anyone/
这可能对您有所帮助：http: //paulbakaus.com/2008/05/31/coverflow-anyone/
Though it doesn't seem that there is any official way to do it because CSS transforms only all a 2d matrix, so you can't get a trapezium shape.
尽管似乎没有任何官方方法可以做到这一点，因为 CSS 仅转换所有 2d 矩阵，因此您无法获得梯形形状。
回答by Julio Montoya
you can find tons of coverflow samples in google but all the samples that i found are too complex(a lot of files or hard to implement) and they don't give what i was looking so i decide to create a coverflow
你可以在 google 中找到大量的 Coverflow 样本，但我发现的所有样本都太复杂（很多文件或难以实现），而且它们没有给出我想要的东西，所以我决定创建一个 Coverflow
1.- less files
1.- 更少的文件
2.- easy to implement
2.- 易于实施
3.- Works with Webkit (Safari, Safari Mobile and Chrome)
3.- 适用于 Webkit（Safari、Safari Mobile 和 Chrome）
the code that i'm going to show is just to give you a clue of what can you do with your project
我将要展示的代码只是为了让你了解你可以用你的项目做什么
this is a very simple sample that only shows you the essential it's not a final work
这是一个非常简单的示例，仅向您展示了它不是最终作品的本质
this coverflow works with a input range (slider) and thats it
这个coverflow适用于输入范围（滑块），就是这样
When you get the idea of how coverflow works you will be able to add more features clicks, touches, flip cover....
当您了解 coverflow 的工作原理时，您将能够添加更多功能点击、触摸、翻盖....
Finally here is the code:
最后是代码：
<!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>
i know you can find a lot of better coverflows this is just to share
我知道你可以找到很多更好的封面这只是为了分享
Just remember to replace the path of the images and/or names
请记住替换图像和/或名称的路径
Hope it helps
希望能帮助到你
Good Luck
祝你好运
回答by Joseph Khan
You can try this, I have developed specifically for iOS devices. Has touch gestures enabled. http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
你可以试试这个，我是专门为 iOS 设备开发的。已启用触摸手势。 http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/
回答by Paul Whitrow
You could try xFlow! http://xflow.pwhitrow.com
你可以试试xFlow！http://xflow.pwhitrow.com
回答by Elmer
i just made this http://coulisse.luvdasun.com/
我刚做了这个 http://coulisse.luvdasun.com/
not sure if it works on iphone / ipod, i still have to test that
不确定它是否适用于 iphone/ipod，我仍然需要测试
gr.
克。
回答by jessecurry
I mainly stick with native App development, so I don't know if there is an existing cover flow implementation, but using Dashcode Partsyou can add some more complex UI elements.
我主要坚持原生App开发，所以我不知道是否有现有的封面流程实现，但是使用Dashcode Parts可以添加一些更复杂的UI元素。
