zoukankan      html  css  js  c++  java
  • 写着玩: 图片 圆盘

    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>
  • 相关阅读:
    3728 联合权值[NOIP 2014 Day1 T2]
    关于深度优先遍历图的非递归算法的一个讨论
    图的遍历递归和非递归实现【整理自网络】
    CSS 居中布局
    css怎样让背景充满整个屏幕
    关于html,body{height:100%}的解释
    4103:踩方格
    2287 火车站
    平面分割问题
    蜜蜂路线
  • 原文地址:https://www.cnblogs.com/qq21270/p/3994613.html
Copyright © 2011-2022 走看看