当前位置： 文江博客话题详情

适用于 iPhone/iPod Touch 的 HTML5 封面流

发布于 2024-08-29 11:17:49 字数 178 浏览 7 评论 0原文

我要做一个针对iPhone和iPod-touch的网页，需要在页面中融入苹果的Coverflow风格来显示视频列表。

我听说过一些可以提供帮助的小发明，但我找不到任何相关的或可以与 iPhone/iPod-Touch 导航一起正常工作的东西。

有人知道可以帮助我入门的东西吗？

谢谢 -斯蒂芬妮

原文

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.

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.

Anyone knows something that could help me getting started?

Thanks
-Stephanie

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

披肩女神 2024-09-05 11:17:49

尝试内容流：
http://www.jacksasylum.eu/ContentFlow/

这是一个在我的 iPhone 上运行的示例:
http://www.majes.fr/

Try ContentFlow:
http://www.jacksasylum.eu/ContentFlow/

Here is an example that is working on my iPhone :
http://www.majes.fr/

回复 原文
幸福还没到 2024-09-05 11:17:49

这是迄今为止我发现的最好的一个;) Coverflow

This is the best one which i found till now ;) Coverflow

回复 原文
孤芳又自赏 2024-09-05 11:17:49

这是 Cover Flow 的跨浏览器实现：http://luwes.co/ labs/js-cover-flow/

主要模式在 HTML5 (JavaScript/CSS) 中工作，并且在 Flash 中为旧版浏览器提供了后备功能。它支持移动设备，您可以通过简单的滑动手势翻阅封面。

测试环境：Safari、Chrome、Firefox、Opera、IE8+、iPad、iPhone

This is a cross-browser implementation of 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.

Tested on: Safari, Chrome, Firefox, Opera, IE8+, iPad, iPhone

回复 原文
渡你暖光 2024-09-05 11:17:49

这可能对您有帮助：http://paulbakaus.com/2008/05/31/ coverflow-anyone/

虽然似乎没有任何官方方法可以做到这一点，因为 CSS 仅转换所有二维矩阵，因此您无法获得梯形形状。

This might help you: 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.

回复 原文
简单 2024-09-05 11:17:49

你可以在谷歌中找到大量的 coverflow 样本
但我发现的所有示例都太复杂（文件很多或难以实现），并且它们没有给出我想要的内容
所以我决定创建一个 coverflow

1.- 更少的文件

2.- 易于实现

3.- 与 Webkit（Safari、Safari Mobile 和 Chrome）一起使用

我将要展示的代码只是为了给你一个线索
您可以对您的项目做什么

这是一个非常简单的示例，仅向您展示了
这不是最终作品，

此封面流程适用于输入范围（滑块）
就是这样

当您了解 coverflow 的工作原理时
您将能够添加更多功能点击、触摸、翻盖...

最后是代码：

<!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>

我知道您可以找到很多更好的封面流程这只是为了分享

只需记住替换图像的路径和/或名字

希望有帮助

祝你好运

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

1.- less files

2.- easy to implement

3.- Works with Webkit (Safari, Safari Mobile and 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

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

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

回复 原文
遗失的美好 2024-09-05 11:17:49

我主要坚持本机应用程序开发，所以我不知道是否有现有的覆盖流实现，但使用 Dashcode 部件 您可以添加一些更复杂的 UI元素。

I mainly stick with native App development, so I don't know if there is an existing cover flow implementation, but using Dashcode Parts you can add some more complex UI elements.

回复 原文
平生欢 2024-09-05 11:17:49

你可以试试xFlow！ http://xflow.pwhitrow.com

You could try xFlow! http://xflow.pwhitrow.com

回复 原文
追风人 2024-09-05 11:17:49

我刚做了这个
http://coulisse.luvdasun.com/

不确定它是否适用于 iphone / iPod，我仍然需要测试一下

gr。

i just made this
http://coulisse.luvdasun.com/

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

gr.

回复 原文
不弃不离 2024-09-05 11:17:49

你可以试试这个，我是专门为iOS设备开发的。已启用触摸手势。
http://jbkflex。 wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

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/

回复 原文
~没有更多了~

关于作者

舂唻埖巳落

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文