<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 *{ margin:0; padding:0; list-style-type: none;}

 #baowei{ margin:260px auto; width:60px; height:60px; }

 ul{width:60px; height:60px; position:relative;}

 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); }

 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;}

 a{ text-decoration:none; outline:none;}a:active {star:expression(this.onFocus=this.blur());}

 </style>

 <script type="text/javascript" src="http://files.cnblogs.com/aypnia/jquery-1.7.2.min.js"></script>

 <script type="text/javascript">

 $(document).ready(function($) {

 var Z=170;

 var bb=Math.sqrt(3)

 var S=$("li").size();

 var zuobiao=[];

 for(var i=0;i<S;i++){

 zuobiao[i]=[];

 }

 zuobiao[0][0]=0;

 zuobiao[0][1]=-Z;

 zuobiao[1][0]=-Z/2;

 zuobiao[1][1]=-Z/2*bb;

 zuobiao[2][0]=-Z/2*bb;

 zuobiao[2][1]=-Z/2;

 zuobiao[3][0]=-Z;

 zuobiao[3][1]=0;

 zuobiao[4][0]=-Z/2*bb;

 zuobiao[4][1]=Z/2;

 zuobiao[5][0]=-Z/2;

 zuobiao[5][1]=Z/2*bb;

 zuobiao[6][0]=0;

 zuobiao[6][1]=Z;

 zuobiao[7][0]=Z/2;

 zuobiao[7][1]=Z/2*bb;

 zuobiao[8][0]=Z/2*bb;

 zuobiao[8][1]=Z/2;

 zuobiao[9][0]=Z;

 zuobiao[9][1]=0;

 zuobiao[10][0]=Z/2*bb;

 zuobiao[10][1]=-Z/2;

 zuobiao[11][0]=Z/2;

 zuobiao[11][1]=-Z/2*bb;

 var K=130;

 var zuobiao2=[];

 for(var i=0;i<S;i++){

 zuobiao2[i]=[];

 }

 zuobiao2[0][0]=0;

 zuobiao2[0][1]=-K;

 zuobiao2[1][0]=-K/2;

 zuobiao2[1][1]=-K/2*bb;

 zuobiao2[2][0]=-K/2*bb;

 zuobiao2[2][1]=-K/2;

 zuobiao2[3][0]=-K;

 zuobiao2[3][1]=0;

 zuobiao2[4][0]=-K/2*bb;

 zuobiao2[4][1]=K/2;

 zuobiao2[5][0]=-K/2;

 zuobiao2[5][1]=K/2*bb;

 zuobiao2[6][0]=0;

 zuobiao2[6][1]=K;

 zuobiao2[7][0]=K/2;

 zuobiao2[7][1]=K/2*bb;

 zuobiao2[8][0]=K/2*bb;

 zuobiao2[8][1]=K/2;

 zuobiao2[9][0]=K;

 zuobiao2[9][1]=0;

 zuobiao2[10][0]=K/2*bb;

 zuobiao2[10][1]=-K/2;

 zuobiao2[11][0]=K/2;

 zuobiao2[11][1]=-K/2*bb;

 $("#aa").toggle(function() {

 $("li").each(function(i) {

 var l11=zuobiao[i][0];

 var t11=zuobiao[i][1];

 $(this).animate({left:l11,top:t11},600,function(){

 var l11=zuobiao2[i][0];

 var t11=zuobiao2[i][1];    

 $(this).animate({left:l11,top:t11},200)})

 })

 },

 function() {

 $("li").each(function(i) {

 var l11=zuobiao[i][0];

 var t11=zuobiao[i][1];

 $(this).animate({left:l11,top:t11},300,function(){

 $(this).animate({left:0,top:0},600)

 })})})})

 </script>

 </head>

 <body>

 <div id="baowei">

 <a id="aa" href="#" title="#"></a>

 <ul id="uu">

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 </ul>

 </div>

 </body>

 </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做运动，第一次运动是大圆的半径，第二次是小圆的半径，实现动态效果。
												


											
【新手练习】类似Path的按钮,的更多相关文章
	

    
								
  1. iOS开发资源：几个类似Path 2.0侧滑菜单的效果实现
		
    IIViewDeckController/ViewDeck 类似 Path 2.0 的视图左右滑动的效果,可向左或者向右顺滑的滑动.支持ARC和non-ARC,默认ARC. https://githu ...
    
		
    2. 
						
  2. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条
		
    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...
    
		
    3. 
						
  3. 如何用HTML5+PhoneGap写个Path项目
		
    最近Path这个应用很火爆,网上也出现了不少仿Path菜单的项目.即使在原生APP里边,Path的效果也是非常赞的.我突然想,Web APP是不是也能做出类似Path那样的效果呢?于是就有了OPath ...
    
		
    4. 
						
  4. [UWP]浅谈按钮设计
		
    一时兴起想谈谈UWP按钮的设计. 按钮是UI中最重要的元素之一,可能也是用得最多的交互元素.好的按钮设计可以有效提高用户体验,构造让人眼前一亮的UI.而且按钮通常不会影响布局,小小的按钮无论怎么改也不 ...
    
		
    5. 
						
  5. WPF 应用完全模拟 UWP 的标题栏按钮
		
    WPF 自定义窗口样式有多种方式,不过基本核心实现都是在修改 Win32 窗口样式.然而,Windows 上的应用就应该有 Windows 应用的样子嘛,在保证自定义的同时也能与其他窗口样式保持一致当 ...
    
		
    6. 
						
  6. 探秘神奇的运动路径动画 Motion Path
		
    CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径.本文将对 motion path 一探究竟,通过本文,你可以了解到: 什么 ...
    
		
    7. 
						
  7. 八、pyqt5按钮类控件——QPushButton、QRadioButton、QCheckBox
		
    pyqt5中常用的按钮类控件有QPushButton.QRadioButton.QCheckBox.QToolButton等.这些按钮类的基类都是QAbstracButton类.所以这些类有部分方法是 ...
    
		
    8. 
						
  8. Ant详解之-path、classpath和fileset
		
    转自:http://www.cnblogs.com/itech/archive/2011/11/01/2231206.html 一 .<path/> 和 <classpath/> ...
    
		
    9. 
						
  9. LeetCode Path Sum IV
		
    原题链接在这里:https://leetcode.com/problems/path-sum-iv/description/ 题目: If the depth of a tree is smaller ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python进程、线程、协程（转载）
			
    python 线程与进程简介 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CPU是计算机的核心,它承担计算机的所有任务. 操作系统是运行在硬件之上的软件,是计算机的管理者,它负责资 ...
    
			
    2. 
						
  2. “System.Data.OracleClient.OracleConnection”已过时
			
    处理办法: 在oracle 安装目录下 找到 Oracle.DataAccess.dll添加引用,然后 using Oracle.DataAccess.Client;其他的都不用动,即可.连接字符串中 ...
    
			
    3. 
						
  3. 用wordpress制作网站的总结
			
    在没有自己的网站的时候很像拥有一个属于自己的网站,可以说是自己的一个愿望吧.但是当我真正的运行起来了之后觉得没有多么的兴奋,自己也折腾了几天wordpress,从买域名空间,到安装WP,遇到了一些问题 ...
    
			
    4. 
						
  4. NOJ 1063 生活的烦恼
			
    描述 生活的暑假刚集训开始,他要决心学好字典树,二叉树,线段树和各种树,但生活在OJ上刷题的时候就遇到了一个特别烦恼的问题.那当然就是他最喜欢的二二叉树咯!题目是这样的:给你一颗非空的二叉树,然后再给 ...
    
			
    5. 
						
  5. NTT【51nod】1514 美妙的序列
			
    题意:1~n 的全排列中,有多少个排列满足任意从中间切成两段后,左边段的最大值大于右边段的最小值? 例如:n为3时有3种 2 3 1 3 1 2 3 2 1 解释:比如 2 3 1 (2) (3 1) ...
    
			
    6. 
						
  6. python下载地址
			
    https://www.python.org/downloads/release/python-351/
    
			
    7. 
						
  7. Asp.net_Webservice返回json
			
    [WebMethod] public List<PictureManager> LoadPictureOne() { dataDataContext context = new dataD ...
    
			
    8. 
						
  8. 转！！java线程状态
			
    一. 线程状态类型1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运 ...
    
			
    9. 
						
  9. 由《win32多线程程序设计》临界区的问题所想
			
    之前看侯捷翻译的<win32多线程程序设计>中关于线程同步中的临界区问题,其中举得例子是对链表的操作.死锁的问题是对一个Swaplist函数的问题,现列举代码如下: void SwapLi ...
    
			
    10. 
						
  10. hiho_1087_哈密顿环
			
    题目 在一个有向图上,从一点A出发,经过所有除A的顶点一次且仅经过一次,最后到达起始点A,所形成的路径为哈密顿环.两个哈密顿环不同,当且仅当路径上的任意一个顶点P的下一个顶点不同.     给出一个顶 ...
    
			
    11.