8

ビデオのリストを表示するために、Apple の Coverflow スタイルをページに組み込む必要がある iPhone および iPod-touch 向けの Web ページを作成する必要があります。

役立つギズモについて聞いたことがありますが、関連するものや、iPhone/iPod-Touch ナビゲーションで適切に機能するものは見つかりません。

誰でも私が始めるのに役立つ何かを知っていますか?

ありがとう - ステファニー

4

9 に答える 9

6

ContentFlowをお試しください： http ：//www.jacksasylum.eu/ContentFlow/

これが私のiPhoneで動作している例です：http： //www.majes.fr/

于 2010-04-19T20:37:02.993 に答える
2

これは、Cover Flowのクロスブラウザー実装です：http：//luwes.co/labs/js-cover-flow/

プライマリモードはHTML5（JavaScript / CSS）で機能し、フラッシュ内の古いブラウザ用のフォールバックがあります。モバイルをサポートしており、簡単なスワイプジェスチャーでカバーをめくることができます。

テスト済み：Safari、Chrome、Firefox、Opera、IE8 +、iPad、iPhone

于 2012-07-21T12:00:43.487 に答える
2

これは私が今まで見つけた中で最高のものです; ）

于 2010-12-03T13:23:03.237 に答える
1

これはあなたを助けるかもしれません: http://paulbakaus.com/2008/05/31/coverflow-anyone/

CSS はすべての 2D マトリックスのみを変換するため、正式な方法はないようですが、台形の形状を取得することはできません。

于 2010-04-18T16:06:58.177 に答える
1

Google でたくさんのカバーフロー サンプルを見つけることができますが、私が見つけたすべてのサンプルは複雑すぎて (ファイルが多く、実装が難しい)、探していたものが得られないため、カバーフローを作成することにしました。

1.- 少ないファイル

2.- 実装が簡単

3.- Webkit (Safari、Safari Mobile、Chrome) で動作

これから紹介するコードは、プロジェクトで何ができるかの手がかりを提供するためのものです

これは非常に単純なサンプルであり、重要な部分のみを示しています。最終的な作業ではありません。

このカバーフローは入力範囲（スライダー）で機能し、それだけです

カバーフローがどのように機能するかを理解すると、クリック、タッチ、カバーのフリップなどの機能を追加できるようになります。

最後に、コードは次のとおりです。

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

より良いカバーフローがたくさんあることを知っています。これは共有するだけです

画像や名前のパスを置き換えることを忘れないでください

それが役に立てば幸い

幸運を

于 2012-09-28T05:18:12.880 に答える
0

あなたはこれを試すことができます、私はiOSデバイスのために特別に開発しました。タッチジェスチャが有効になっています。 http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

于 2012-08-21T13:20:21.053 に答える
0

私は主にネイティブ アプリの開発に固執しているため、既存のカバー フローの実装があるかどうかはわかりませんが、Dashcode パーツを使用すると、より複雑な UI 要素を追加できます。

于 2010-04-18T16:06:26.093 に答える
0

xFlow を試すことができます。http://xflow.pwhitrow.com

于 2010-06-08T22:45:15.743 に答える
0

私はちょうどこれを作った http://coulisse.luvdasun.com/

iPhone / iPodで動作するかどうかわからないので、まだテストする必要があります

グラム。

于 2010-11-27T18:54:13.480 に答える