【新手练习】类似Path的按钮,

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 
  7 <style type="text/css">
  8 *{ margin:0; padding:0; list-style-type: none;}
  9 #baowei{ margin:260px auto; width:60px; height:60px; }
 10 ul{width:60px; height:60px; position:relative;}
 11 a{ width:60px; height:60px;position:absolute; z-index:1000; background-image:url(http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_bg-2x.png); }
 12 li{ position:absolute;width:60px; height:60px; background-image:url(http://images.cnblogs.com/cnblogs_com/aypnia/511966/o_bg-item-2x.png); background-repeat:no-repeat; background-position:center; top:0px; left:0px;}
 13 
 14 a{ text-decoration:none; outline:none;}a:active {star:expression(this.onFocus=this.blur());}
 15 
 16 </style>
 17 <script type="text/javascript" src="https://files.cnblogs.com/aypnia/jquery-1.7.2.min.js"></script>
 18 <script type="text/javascript"> 
 19 $(document).ready(function($) {
 20 var Z=170;
 21 var bb=Math.sqrt(3)
 22 var S=$("li").size();
 23 var zuobiao=[];
 24 
 25 for(var i=0;i<S;i++){
 26 
 27 zuobiao[i]=[];
 28 }
 29 zuobiao[0][0]=0;
 30 zuobiao[0][1]=-Z;
 31 zuobiao[1][0]=-Z/2;
 32 zuobiao[1][1]=-Z/2*bb;
 33 zuobiao[2][0]=-Z/2*bb;
 34 zuobiao[2][1]=-Z/2;
 35 zuobiao[3][0]=-Z;
 36 zuobiao[3][1]=0;
 37 zuobiao[4][0]=-Z/2*bb;
 38 zuobiao[4][1]=Z/2;
 39 zuobiao[5][0]=-Z/2;
 40 zuobiao[5][1]=Z/2*bb;
 41 zuobiao[6][0]=0;
 42 zuobiao[6][1]=Z;
 43 zuobiao[7][0]=Z/2;
 44 zuobiao[7][1]=Z/2*bb;
 45 zuobiao[8][0]=Z/2*bb;
 46 zuobiao[8][1]=Z/2;
 47 zuobiao[9][0]=Z;
 48 zuobiao[9][1]=0;
 49 zuobiao[10][0]=Z/2*bb;
 50 zuobiao[10][1]=-Z/2;
 51 zuobiao[11][0]=Z/2;
 52 zuobiao[11][1]=-Z/2*bb;
 53 
 54 
 55 
 56 var K=130;    
 57 var zuobiao2=[];
 58 for(var i=0;i<S;i++){
 59 zuobiao2[i]=[];
 60 }
 61 zuobiao2[0][0]=0;
 62 zuobiao2[0][1]=-K;
 63 zuobiao2[1][0]=-K/2;
 64 zuobiao2[1][1]=-K/2*bb;
 65 zuobiao2[2][0]=-K/2*bb;
 66 zuobiao2[2][1]=-K/2;
 67 zuobiao2[3][0]=-K;
 68 zuobiao2[3][1]=0;
 69 zuobiao2[4][0]=-K/2*bb;
 70 zuobiao2[4][1]=K/2;
 71 zuobiao2[5][0]=-K/2;
 72 zuobiao2[5][1]=K/2*bb;
 73 zuobiao2[6][0]=0;
 74 zuobiao2[6][1]=K;
 75 zuobiao2[7][0]=K/2;
 76 zuobiao2[7][1]=K/2*bb;
 77 zuobiao2[8][0]=K/2*bb;
 78 zuobiao2[8][1]=K/2;
 79 zuobiao2[9][0]=K;
 80 zuobiao2[9][1]=0;
 81 zuobiao2[10][0]=K/2*bb;
 82 zuobiao2[10][1]=-K/2;
 83 zuobiao2[11][0]=K/2;
 84 zuobiao2[11][1]=-K/2*bb;
 85 
 86 $("#aa").toggle(function() {
 87 
 88 $("li").each(function(i) {
 89 
 90 var l11=zuobiao[i][0];
 91 var t11=zuobiao[i][1];
 92 
 93 $(this).animate({left:l11,top:t11},600,function(){
 94 
 95 var l11=zuobiao2[i][0];
 96 var t11=zuobiao2[i][1];    
 97 
 98 $(this).animate({left:l11,top:t11},200)})
 99 })
100 },
101 
102 
103 function() {
104 
105 $("li").each(function(i) {
106 var l11=zuobiao[i][0];
107 var t11=zuobiao[i][1];
108 
109 $(this).animate({left:l11,top:t11},300,function(){
110 
111 
112 $(this).animate({left:0,top:0},600)
113 
114 })})})})
115 
116 </script>
117 </head>
118 
119 <body>
120 
121 <div id="baowei">
122 <a id="aa" href="#" title="#"></a>
123 <ul id="uu">
124 <li></li>
125 <li></li>
126 <li></li>
127 <li></li>
128 <li></li>
129 <li></li>
130 <li></li>
131 <li></li>
132 <li></li>
133 <li></li>
134 <li></li>
135 <li></li>
136 
137 </ul>
138 </div>
139 </body>
140 </html>

学习到的地方：1：去除链接点击后的虚线CSS

a{ text-decoration:none; outline:none;}
a:active {star:expression(this.onFocus=this.blur());} 
2.要要数组赋值，首先要声明它是个数组；
3.基本思路，我的方法很笨，因为是新手，（1）CSS设置包围的框为相对地位，设定大小，<li>绝对定位 大小一致，（2）创立两个数组，存放两个不同直径同一圆心的园的坐标；圆心的坐标为（0，0）我这里选的是30度角，根据30度直角三角形的公式1：2：根号3，已知斜边长 求出两个直角边，作为<LI>的运动目标的坐标值。（3）用animate做运动，第一次运动是大圆的半径，第二次是小圆的半径，实现动态效果。