写着玩： 图片 圆盘

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>