<!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. SpringMVC  使用Form标签库制作登录表单
			
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
    
			
    2. 
						
  2. ubuntu14.04换一个更快的源
			
    mirrors.yun-idc.com,这个源可比ubuntu自带的源快多了,我的source.list文件内容如下: deb http://mirrors.yun-idc.com/ubuntu/ t ...
    
			
    3. 
						
  3. iOS - Swift NSEnumerator		迭代器
			
    前言 public class NSEnumerator : NSObject, NSFastEnumeration 1.迭代器 let arr:NSArray = ["bei", ...
    
			
    4. 
						
  4. iOS - TouchLock 手势解锁
			
    1.手势解锁的创建 代码封装见 QExtension QLockView.h #import <UIKit/UIKit.h> @interface QLockView : UIView / ...
    
			
    5. 
						
  5. [转载] Tmux 速成教程：技巧和调整
			
    原文: http://blog.jobbole.com/87584/ 决定从 screen 转向 tmux 了, 非常喜欢 tmux 的窗格功能. 简介 有些开发者经常要使用终端控制台工作,导致最终打 ...
    
			
    6. 
						
  6. 用python实现把数字人民币金额转换成大写的脚本程序
			
    # -*- coding: utf-8 -*- def Num2MoneyFormat( change_number ): """ .转换数字为大写货币格式( forma ...
    
			
    7. 
						
  7. VIM跳到指定行
			
    ngg nG :n n is the line number
    
			
    8. 
						
  8. python的最最最最最基本语法（2）
			
    函数的定义: 使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 当用return 返回多个值时,返回的其实是一个tuple, ...
    
			
    9. 
						
  9. DOM节点操作
			
    请尊重知识,请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1  一.创建节 ...
    
			
    10. 
						
  10. Android 进入页面默认定位到ListView的解决方法
			
    由于ListView会默认去获取焦点,如果说ListView在页面的下方的话,那么点击条目进入新页面并退出,那么这时候就会定位到ListView这里,而不是展示头部.   解决这个问题,只需要在Lis ...
    
			
    11.