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 정도인데 입맛대로 수정하면 됨.
댓글
댓글 쓰기