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

回答

相关问题