<!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. (转)C# Winform应用程序占用内存较大解决方法整理
			
    背景: 微软的 .NET FRAMEWORK 现在可谓如火如荼了.但是,.NET 一直所为人诟病的就是“胃口太大”,狂吃内存,虽然微软声称 GC 的功能和智能化都很高,但是内存的回收问题,一直存在困扰 ...
    
			
    2. 
						
  2. Populating Display Item Value On Query In Oracle Forms
			
    Write Post-Query trigger for the block you want to fetch the field value for display item.ExampleBeg ...
    
			
    3. 
						
  3. c#扩展方法的理解（一:初识）
			
    扩展方法是静态方法,是类的一部分,但是实际上没有放在类的源代码中. 扩展方法所在的类也必须被声明为static C#只支持扩展方法,不支持扩展属性.扩展事件等. 扩展方法的第一个参数是要扩展的类型,放 ...
    
			
    4. 
						
  4. Struts2-S2-032远程命令执行EXP
			
    看到网上好多写的EXP有后门啊  还是自己写个吧! 工具下载:链接: http://pan.baidu.com/s/1miRbi2k 密码: fzfv
    
			
    5. 
						
  5. JAVA查找--[二分查找]
			
    package com.array; public class BinaryFind { /* * 项目名称:二分查找 ; * 项目要求:用JAVA对数组进行查找,并运用快速查找算法; * 作者:Se ...
    
			
    6. 
						
  6. CUBRID学习笔记 1  简介 cubrid教程
			
    CUBRID 是一个全面开源,且完全免费的关系数据库管理系统.CUBRID为高效执行Web应用进行了高度优化,特别是需要处理大数据量和高并发请求的复杂商务服务.通过提供独特的最优化特性,CUBRID可 ...
    
			
    7. 
						
  7. MySQL数据表生成ER图
			
    遇到没有说明文档的数据库的时候,一张一张表去分析,需要花费很长时间和精力. 幸好有一些工具,可以帮助我们生成ER图,这样看起来就一目了然: 下面我将自己的一次实践记录于下,供参考: 1.下载并安装工具 ...
    
			
    8. 
						
  8. WdatePicker.js 日历点击时，触发自定义方法 ,可以调用自己的函数。
			
    问题: 在选择日期后,没有提交按钮,得到日期后,就可以把日期传到后台,然后就可以得到数据. 方法: 在input 标签中加入onfocus ,就可以了. wdatePicker();可以自定义事件函数 ...
    
			
    9. 
						
  9. TCP协议中的三次握手和四次挥手(图解)  转载
			
    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...
    
			
    10. 
						
  10. 49个jquery代码经典片段
			
    49个jquery代码经典片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地 ...
    
			
    11.