예전에 티몬인가 쿠팡에서 퍼블리셔가 관람차랑 롤러코스터 돌아가는거 만들어본거 보구
만들어봤음...
이미지 구하는게 너무 힘들어서 스마일루^^
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> <head> <meta charset="utf-8"> <title>A big wheel</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> var distance = 80; // distance of b from a var speed = 30; // revolution speed in degrees per second var rate = 700; // refresh rate in ms function spin(id, dis, varid){ var o = $('#a').offset(); var t = o.top + (distance * Math.sin(dis * Math.PI/180.0)); var l = o.left+ (distance * Math.cos(dis * Math.PI/180.0)); $('#'+id).css({ top: t, left: l }); window[varid] += (speed * (rate/1000)) % 360; } var angleDistance = 0; // starting angle var length = 0; //오브젝트 갯수 var IDs = []; $(document).ready(function() { IDs = $('div[class^="obj"]'); length = IDs.length; for(i=0;i<length;i++) { window['angle'+i]=angleDistance; angleDistance+=30; //각 오브젝트의 간격 } setInterval(aa, rate); }); function aa(){ for(i=0;i<length;i++) { spin(IDs[i].id , window['angle'+i], 'angle'+i); } } </script> <style type="text/css"> div { position: absolute; } #a { top: 100px; left: 100px; color: red; } </style> </head> <body> <div id="a">♥</div> <div id="obj2" class="obj">☻</div> <div id="obj3" class="obj">○</div> <div id="obj4" class="obj">☻</div> <div id="obj5" class="obj">○</div> <div id="obj6" class="obj">☻</div> <div id="obj7" class="obj">☻</div> <div id="obj8" class="obj">○</div> <div id="obj9" class="obj">☻</div> <div id="obj10" class="obj">○</div> <div id="obj11" class="obj">☻</div> <div id="obj12" class="obj">○</div> <div id="obj13" class="obj">☻</div> </body> </html> |
'Programming > JavaScript' 카테고리의 다른 글
| document.selection.createRange 안될때 [출처] document.selection.createRange 안될때 |작성자 검색신 (0) | 2014.09.19 |
|---|---|
| [jquery] checkbox 하나만 체크되게 하기 (5) | 2014.09.04 |
| [jQuery] enterKey 막기 (0) | 2014.08.06 |
| [jQuery] $.unique() , $.inArray() ,$.makeArray() (0) | 2014.07.04 |
| [jquery]jquery widget example (0) | 2014.03.07 |