寫著玩： 圖片 圓盤

標籤：style   blog   http   color   io   os   java   ar   for   

http://vlog.it/　　參考網站

 

<style type="text/css">#panel{position:absolute;left:500px;top:400px;}#panel > img{position:absolute;}.ts0{transform:rotate(0deg);}.ts1{transform:rotate(30deg);}.ts2{transform:rotate(60deg);}.ts3{transform:rotate(90deg);}.ts4{transform:rotate(120deg);}.ts5{transform:rotate(150deg);}.ts6{transform:rotate(180deg);}.ts7{transform:rotate(210deg);}.ts8{transform:rotate(240deg);}.ts9{transform:rotate(270deg);}.ts10{transform:rotate(300deg);}.ts11{transform:rotate(330deg);}</style><div id="panel"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts0"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts1"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts2"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts3"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts4"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts5"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts6"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts7"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts8"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts9"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts10"><img src="http://i.vimeocdn.com/video/94472021_200x150.jpg" class="ts11"></div><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript">$(function(){    var r=300;    for(var i=0;i<12;i++){        var theta = (30*i)/180;        var y=Math.sin(theta*Math.PI)*r;        var x=Math.cos(theta*Math.PI)*r;        var obj=$("img").eq(i);        obj.css("left",x);        obj.css("top",y);        //console.log(theta+"   ----------- "+x+"    ,  " +y);    }});</script>

 

寫著玩： 圖片 圓盤