2012년 2월 23일 목요일

javascript 3d round carousel

http://jsdo.it/spectrum/carousel
역시나 맘에 드는게 없어서 만들었다.
어렵지 않을려나 싶었는데 생각보다 얼마 안걸림.
역시 모닝 코딩인가.
querySelectorAll 때문에 $s 랑, items() 를 프로토타입에서 array를 반환하도록 하여 forEach를 돌릴 수 있도록 소금(salt)을 쳤다.
var $=function(selector) {
    return document.querySelector(selector);
};

var $s=function(selector) {
    return document.querySelectorAll(selector);
};

NodeList.prototype.items=function() { 
    var array=[]; 
    for (var i=0; i [2, 0] (뒤집힘)
     // / 2   하면     [1, 0]이 됨.
     // * (1-2/5) 하면 [3/5, 0]
     // 1 -   하면     [2/5, 1]
     var scale = (1-(1-Math.sin(degree*Math.PI/180))/2*(1-2/5));
     v.setAttribute('style', 
      'left:'+parseInt(x,10)+'px;'+ 
      'top:'+parseInt(y,10)+'px;'+
      'z-index:'+parseInt(y,10)+';'+
      '-webkit-transform: scale('+scale+');'
     );
 });
    }
};
document.ontouchmove = function(e){ e.preventDefault(); };
p.objects=$s('ul#container>li');
p.renderCarousel(p.idx);
window.onload=p.onLoad;

ul 안에 li를 몇개든 넣어보자.
중심을 기준으로 반지름은 100px, 종횡비는 2/5:1 정도인데 입맛대로 수정하면 됨.