【新手练习】类似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做运动，第一次运动是大圆的半径，第二次是小圆的半径，实现动态效果。
