http://jsdo.it/spectrum/carousel
역시나 맘에 드는게 없어서 만들었다.
어렵지 않을려나 싶었는데 생각보다 얼마 안걸림.
역시 모닝 코딩인가.
querySelectorAll 때문에 $s 랑, items() 를 프로토타입에서 array를 반환하도록 하여 forEach를 돌릴 수 있도록 소금(salt)을 쳤다.
ul 안에 li를 몇개든 넣어보자.
중심을 기준으로 반지름은 100px, 종횡비는 2/5:1 정도인데 입맛대로 수정하면 됨.
역시나 맘에 드는게 없어서 만들었다.
어렵지 않을려나 싶었는데 생각보다 얼마 안걸림.
역시 모닝 코딩인가.
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 정도인데 입맛대로 수정하면 됨.
댓글
댓글 쓰기