HTML5 for iPhone/iPod Touch的Coverflow

這是一個很好的實現，但最大的缺點是它不會優雅地退化（禁用JavaScript和繁榮，沒有內容），絕對不能被殘疾人訪問。由於它依賴於外部JSON源，因此它在CMS生成的圖庫（如Wordpress）中也不可用。代替解析JSON文件，最好在html中設置圖形元素的樣式。 – KPM 2012-09-04 15:58:33

感謝您的反饋。雖然沒有關注外部JSON評論，但你是否說Wordpress網站中不可能有JSON文件？儘管如此，該腳本還允許內聯JSON。 – luwes 2013-01-04 09:27:50

你可以試試這個，我已經爲iOS設備開發的。觸摸手勢已啓用。 http://jbkflex.wordpress.com/2012/08/21/css3-coverflow-animation-for-ios-adding-touch-gestures/

來源

2012-08-21 13:20:21

孤獨的鏈接[被認爲是一個不好的答案]（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的，這只是分享

只記得更換圖像和/或名稱

的路徑希望它可以幫助

好運

來源

2012-09-28 05:18:12

HTML5 for iPhone/iPod Touch的Coverflow

回答

相關問題