Javscript 3D Round Carousel spectrum Follow 2012-02-23 13:36:42 License: MIT License Fork2 Fav1 View2202 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 63 lines HTML 15 lines CSS 33 lines Javscript 3D Round Carousel 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<this.length; i++) { array[i]=this.item(i); } return array; }; var p={ objects: [], idx: 0, radius: 100, onLoad: function() { $('#turnLeft').onclick=p.turnLeft; $('#turnRight').onclick=p.turnRight; }, turnLeft: function() { p.objects.items().forEach(function(v) { v.classList.add('ease'); }); p.idx--; p.renderCarousel(p.idx); }, turnRight: function() { p.objects.items().forEach(function(v) { v.classList.add('ease'); }); p.idx++; p.renderCarousel(p.idx); }, renderCarousel: function(idx) { p.objects.items().forEach(function(v,k) { var degree = 90+(k+idx)* (360/p.objects.length); var x = $('ul').offsetWidth/2 - v.offsetWidth/2 + p.radius*Math.cos(degree*Math.PI/180); var y = $('ul').offsetHeight/2 - v.offsetHeight/2 + p.radius*Math.sin(degree*Math.PI/180) / 2; // cos의 min/max 는 270일때 -1, 90일때 1 // 1 - 하면 [-1, 1] > [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; <p>3d round carousel </p> <ul class="carousel" id="container"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <p> <button id="turnLeft">left</button> <button id="turnRight">right</button> </p> Javscript 3D Round Carousel * { margin:0; spacing:0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; } body { background-color: #DDDDDD; font: 30px sans-serif; } ul { width:480px; height:300px; background-color:#999; position: relative; } ul>li { width:100px; height:100px; position: absolute; background-color:#fff; text-align:center; list-style:none; left:190px; top:0; border:solid; 1px; #777; } .ease { -webkit-transition: 0.3s ease; } 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<this.length; i++) { array[i]=this.item(i); } return array; }; var p={ objects: [], idx: 0, radius: 100, onLoad: function() { $('#turnLeft').onclick=p.turnLeft; $('#turnRight').onclick=p.turnRight; }, turnLeft: function() { p.objects.items().forEach(function(v) { v.classList.add('ease'); }); p.idx--; p.renderCarousel(p.idx); }, turnRight: function() { p.objects.items().forEach(function(v) { v.classList.add('ease'); }); p.idx++; p.renderCarousel(p.idx); }, renderCarousel: function(idx) { p.objects.items().forEach(function(v,k) { var degree = 90+(k+idx)* (360/p.objects.length); var x = $('ul').offsetWidth/2 - v.offsetWidth/2 + p.radius*Math.cos(degree*Math.PI/180); var y = $('ul').offsetHeight/2 - v.offsetHeight/2 + p.radius*Math.sin(degree*Math.PI/180) / 2; // cos의 min/max 는 270일때 -1, 90일때 1 // 1 - 하면 [-1, 1] > [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; <p>3d round carousel </p> <ul class="carousel" id="container"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <p> <button id="turnLeft">left</button> <button id="turnRight">right</button> </p> * { margin:0; spacing:0; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; } body { background-color: #DDDDDD; font: 30px sans-serif; } ul { width:480px; height:300px; background-color:#999; position: relative; } ul>li { width:100px; height:100px; position: absolute; background-color:#fff; text-align:center; list-style:none; left:190px; top:0; border:solid; 1px; #777; } .ease { -webkit-transition: 0.3s ease; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author spectrum URLhttp://spectrumdig.blogspot.com Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/mfqi/js"></script> Discussion Questions on this code? Tags carousel Favorite by Kolawole.Aye: carouselgreat Forked sort by latest page views favorite forked forked: Javscript 3D Round Car deholic 00 535 64/15/30 forked: Javscript 3D Round Car jinihl 11 1682 63/15/33
