CoverFlowを実現するJavaScript「JS Coverflow」

iPodの普及で見慣れたappleの「CoverFlow」
これをJavaScriptで実現した「JS Coverflow」を紹介します。 CoverFlowを実現するJavaScript「JS Coverflow」サンプル

使用方法
JS Coverflowからcoverflow.jsをダウンロードします。
head内に以下を記述します。
かなり長くなりますが。。。
<script type="text/javascript" src="http://yourdomain/coverflow.js"></script>
<script type="text/javascript">
CVFLEl.getCoords = function()
{
var el = this;
var pos = {x: 0, y: 0, w: this.offsetWidth, h: this.offsetHeight};
while(el && el != document.body)<
{
pos.x += el.offsetLeft, pos.y += el.offsetTop;
el = el.offsetParent;
}
return pos;
};
var Lightbox =
{
show: function(src, imgId)
{
var html = document.getElementsByTagName('html')[0];
var overlay = document.createElement('div');
overlay.id = '__lb-ol';
var h = Math.max(html.scrollHeight, window.innerHeight);
var w = Math.max(html.scrollWidth, window.innerWidth);
//overlay.style.height = h +'px';
overlay.style.opacity = 0;
document.body.appendChild(overlay);
var trail = CVFL$(imgId);
var pos = trail.getCoords();
var img = new Image();
img.src = src;
img.id = '__lb-im';
var finalW = finalH = img.width;
var finalT = (window.innerHeight - finalH) / 2, finalL = (window.innerWidth - finalW) / 2;
finalT += html.scrollTop;
img.style.opacity = 0.5;
img.style.height = pos.w +'px'; img.style.width = pos.w +'px';
img.style.top = pos.y +'px'; img.style.left = pos.x +'px';
document.body.appendChild(img);
overlay.onclick = img.onclick = Lightbox.close;
new Anim(overlay).start({opacity: [0.7]});
new Anim(img).start(
{
opacity: [1], width: [finalW], height: [finalH],
top: [finalT], left: [finalL]
});
},
close: function()
{
var el = CVFL$('__lb-ol');
new Anim(el, {duration: 300, onComplete: function(el){ el.remove(); }}).start({opacity: [0]});
el = CVFL$('__lb-im');
new Anim(el, {duration: 300, onComplete: function(el){ el.remove(); }}).start({opacity: [0]});
}
};
window.onload = function()
{
Coverflow.init(
[
{src: '画像パス', label: {album: '名前', artist: 'アーティスト名'}},
{src: '画像パス', label: {album: '名前', artist: 'アーティスト名'}},
{src: '画像パス', label: {album: '名前', artist: 'アーティスト名'}}
],
{
createLabel: function(item)
{
return item.label.album +'<br>'+ item.label.artist;
},
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}
});
}
</script>
<style type="text/css">
body{position: relative;}
canvas, img{position: absolute;}
#__cvfl-coverflow{height: 375px;margin: auto;overflow: hidden;position: relative;width: 530px;}
#__cvfl-coverflow-label{color: #fff;font: 14pt Lucida Grande, Lucida Sans Unicode;line-height: 1.3em;position: relative;text-align: center;top: 273px;z-index: 700;}
</style>

最後に下記を表示させたい場所に記載してください。
<div id="__cvfl-coverflow">
<div id="__cvfl-coverflow-wrapper"></div>
<div id="__cvfl-coverflow-label">&l;t/div>
</div>

CoverFlowを実現するJavaScript「JS Coverflow」サンプル

sponsors

「CoverFlowを実現するJavaScript「JS Coverflow」」をシェアする

記事作成:
記事URL:

TOP > > > CoverFlowを実現するJavaScript「JS Coverflow」