blocks|key|4519663|text|试试ContentFlow：http://www.jacksasylum.eu/ContentFlow/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4519664|下面是一个在我的iPhone上运行的例子：http://www.majes.fr/|4519665|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jacksasylum.eu/ContentFlow/|1|http://www.majes.fr/^0|E|12|0|0|L|K|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>Try ContentFlow:
<a href="http://www.jacksasylum.eu/ContentFlow/" rel="noreferrer">http://www.jacksasylum.eu/ContentFlow/</a></p>

<p>Here is an example that is working on my iPhone :
<a href="http://www.majes.fr/" rel="noreferrer">http://www.majes.fr/</a></p>


blocks|key|5935672|text|这是到目前为止我发现的最好的一个;)+Coverflow|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5935673|entityMap|0|LINK|mutability|MUTABLE|url|http://addyosmani.com/blog/jqueryuicoverflow/#more-1785^0|J|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>This is the best one which i found till now ;) <a href="http://addyosmani.com/blog/jqueryuicoverflow/#more-1785" rel="nofollow">Coverflow</a></p>


blocks|key|1820950|text|这是Cover+Flow的跨浏览器实现：+|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1820951|主模式在HTML5+(JavaScript/CSS)中工作，对于flash中的旧浏览器有一个后备模式。它支持移动，你可以通过一个简单的滑动手势翻阅封面。|1820952|测试平台:+Safari、Chrome、火狐、Opera、IE8%2B、iPad、iPhone|1820953|entityMap^0|0|K|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

<p><strong>This is a cross-browser implementation of Cover Flow: <a href="http://luwes.co/labs/js-cover-flow/" rel="nofollow">http://luwes.co/labs/js-cover-flow/</a></strong></p>

<p>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.</p>

<p>Tested on: Safari, Chrome, Firefox, Opera, IE8+, iPad, iPhone</p>


blocks|key|1824591|text|这可能会对你有所帮助：http://paulbakaus.com/2008/05/31/coverflow-anyone/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1824592|虽然似乎没有任何官方方法可以做到这一点，因为CSS只变换所有的2维矩阵，所以你不能得到梯形形状。|1824593|entityMap|0|LINK|mutability|MUTABLE|url|http://paulbakaus.com/2008/05/31/coverflow-anyone/^0|B|1E|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>This might help you: <a href="http://paulbakaus.com/2008/05/31/coverflow-anyone/" rel="nofollow noreferrer">http://paulbakaus.com/2008/05/31/coverflow-anyone/</a></p>

<p>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.</p>


blocks|key|4519805|text|你可以在google中找到大量的coverflow样本，但是我发现的所有样本都太复杂了(很多文件或者很难实现)，而且它们不能给出我想要的结果，所以我决定创建一个coverflow|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4519806|1.-文件较少|4519807|2.-易于实现|4519808|3.-支持Webkit+(Safari、Safari+Mobile和Chrome)|4519809|我将要展示的代码只是给您一个线索，告诉您可以如何处理您的项目|4519810|这是一个非常简单的示例，它只向您展示了基本内容，而不是最终的作品|4519811|此coverflow使用输入范围(滑块)，仅此而已|4519812|当您了解coverflow的工作原理后，您将能够添加更多功能点击、触摸、翻盖……|4519813|最后是代码：|4519814|<!DOCTYPE+html>
<html+lang="en">
<head>
<meta+charset="utf-8"/>
<title>CoverFlow</title>
<style>
++html+{+height:+100%25;+}
++body+{+background-image:+-webkit-radial-gradient(gray+0%25,+black+100%25);+}

++#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%25;
++width:+100%25;+++++
++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+%2B+"");
+var+position+=+[0,+230,+180,+130,+80,+30,+-20,+-70,+-120,+-170,+-220,+-270];+

+for+(var+i+=+current;+i+<+(coverCount+%2B1);+i%2B%2B)+++++
++{+
+document.getElementById(i+%2B+"").style.webkitTransform+=+"translate3d("%2B((i%2Bspace)*50)%2B"px,0,-10px)+rotateY(-65deg)";
+document.getElementById(i+%2B+"").style.zIndex+=+-i+%2B+"";
++}

+for+(var+i+=+1;+i+<+current;+i%2B%2B)+++++
++{+
+document.getElementById(i+%2B+"").style.webkitTransform+=+"translate3d("%2B((i-space)*50)%2B"px,0,-10px)+rotateY(65deg)";
+document.getElementById(i+%2B+"").style.zIndex+=+i+%2B+"";
++}

++cover.style.webkitTransform+=+"translate3d("%2B(slider.value*50)%2B"px,0,100px)+rotateY(0deg)";+
++cover.style.zIndex+=+current+%2B+"";+++++
++document.getElementById("container").style.marginLeft+=++position[current]+%2B+"px";+
++document.getElementById("log").innerHTML+=+slider.value+%2B+"";
++}
+</script>
+</body>
+</html>|code-block|syntax|javascript|4519815|我知道你可以找到很多更好的封面这只是为了分享|4519816|只需记住替换图像和/或名称的路径|4519817|希望能有所帮助|4519818|祝好运|4519819|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1B|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1D|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1F|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1H|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1I|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

<p>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 </p>

<p>1.-  less files</p>

<p>2.-  easy to implement</p>

<p>3.- Works with Webkit (Safari, Safari Mobile and Chrome)</p>

<p>the code that i'm going to show is just to give you a clue
of what can you do with your project</p>

<p>this is a very simple sample that only shows you the essential
it's not a final work </p>

<p>this coverflow works with a input range (slider)
and thats it </p>

<p>When you get the idea of how coverflow works
you will be able to add more features clicks, touches, flip cover....</p>

<p>Finally here is the code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"/&gt;
&lt;title&gt;CoverFlow&lt;/title&gt;
&lt;style&gt;
  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; }

 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body onload="flow()"&gt;

 &lt;div id="coverflow"&gt;
 &lt;div id="container"&gt;
      &lt;div class="holder" id="1"&gt;&lt;img src="../img/1.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="2"&gt;&lt;img src="../img/2.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="3"&gt;&lt;img src="../img/3.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="4"&gt;&lt;img src="../img/4.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="5"&gt;&lt;img src="../img/5.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="6"&gt;&lt;img src="../img/6.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="7"&gt;&lt;img src="../img/7.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="8"&gt;&lt;img src="../img/8.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="9"&gt;&lt;img src="../img/9.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="10"&gt;&lt;img src="../img/1.jpg" width="200"&gt;&lt;/div&gt;
      &lt;div class="holder" id="11"&gt;&lt;img src="../img/2.jpg" width="200"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;input id="slider" class="slider" type="range" min="1" max="11" value="6" onchange="flow();"&gt;
 &lt;a id="log"&gt;value&lt;/a&gt;
 &lt;script&gt;
 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 &lt; (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 &lt; 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 + "";
  }
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>i know you can find a lot of better coverflows this is just to share</p>

<p>Just remember to replace the path of the images and/or names</p>

<p>Hope it helps</p>

<p>Good Luck</p>


blocks|key|2406775|text|我主要使用原生应用程序开发，所以我不知道是否有现有的cover+flow实现，但使用Dashcode+Parts可以添加一些更复杂的UI元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2406776|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/PartsReference/PartsReference.html#//apple_ref/doc/uid/TP40004692-CH14-SW5^0|16|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I mainly stick with native App development, so I don't know if there is an existing cover flow implementation, but using <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/PartsReference/PartsReference.html#//apple_ref/doc/uid/TP40004692-CH14-SW5" rel="nofollow noreferrer">Dashcode Parts</a> you can add some more complex UI elements.</p>


blocks|key|4519680|text|你可以试试xFlow！http://xflow.pwhitrow.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4519681|entityMap|0|LINK|mutability|MUTABLE|url|http://xflow.pwhitrow.com/^0|B|P|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You could try xFlow! <a href="http://xflow.pwhitrow.com" rel="nofollow noreferrer">http://xflow.pwhitrow.com</a></p>


blocks|key|5935662|text|我刚做了这个http://coulisse.luvdasun.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5935663|我不确定它是否能在iphone+/+ipod上工作，我还需要测试一下|5935664|gr。|5935665|entityMap|0|LINK|mutability|MUTABLE|url|http://coulisse.luvdasun.com/^0|6|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>i just made this
<a href="http://coulisse.luvdasun.com/" rel="nofollow">http://coulisse.luvdasun.com/</a></p>

<p>not sure if it works on iphone / ipod, i still have to test that</p>

<p>gr.</p>


blocks|key|2406955|text|你可以试试这个，我专门为iOS设备开发的。启用了触摸手势。http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2406956|entityMap|0|LINK|mutability|MUTABLE|url|http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/^0|T|2N|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can try this, I have developed specifically for iOS devices. Has touch gestures enabled.
<a href="http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/" rel="nofollow">http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/</a></p>


<p>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. </p>

<p>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.</p>

<p>Anyone knows something that could help me getting started?</p>

<p>Thanks
-Stephanie</p>


Coverflow in HTML5 for iPhone/iPod Touch

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我必须为iPhone和iPod-touch制作一个网页，它需要将苹果的Coverflow风格融入到一个页面中，以显示一系列视频。我听说一些关于gizmos的东西可能会有帮助，但我找不到任何相关的东西，或者可以在iPhone/iPod-Touch导航中正常工作。有人知道什么可以帮助我入门吗？谢谢-Stephanie

问iPhone/iPod Touch的HTML5中的Coverflow
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone/iPod Touch的HTML5中的CoverflowEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iPhone/iPod Touch的HTML5中的Coverflow
EN