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

 <!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的按钮,的更多相关文章

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

随机推荐

C#无需IIS构建XmlRpc服务器
准备我们使用CookComputing.XmlRpcServerV2 3.0.0来构建XmlRpc服务器. 新建一个控制台项目,在项目中添加对CookComputing.XmlRpcServerV2 ...
Creating HTML table with vertically oriented text as table header 表头文字方向
AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...
Native SQL
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
CUBRID学习笔记 15 Lobs类型数据
BLOB: Binary large object CLOB: Character large object 一个二进制一个字符类型二进制的读取 CUBRIDCommand cmd = new C ...
Log4j XML 配置
Xml代码 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:configurat ...
差之毫厘谬之千里！带你认识CPU后缀含义
intel的几代CPU中,后缀字母主要有以下几种: M:笔记本专用CPU,一般为双核,M前面一位数字是0,意味着是标准电压处理器,如果是7,则是低电压处理器. U:笔记本专用低电压CPU,一般为双核, ...
Thinking in Java 笔记初衷
当读到第十章的时候,发现之前读过的内容很难准确的记忆起来,这样给后续的阅读带来了一定的困惑,而之前也没有做适当的可读性的复习笔记,所以发现重新找后续阅读需要的知识点时,是有一定的困难的. 同时在知乎今 ...
HDU5869树状数组+gcd预处理
比赛的时候知道用树状数组,但有点乱不知道怎么处理. 统计不同的gcd的个数其实就是用树状数组统计区间内不同的数的模板题啊... 复杂度O(nlogn) #include <bits/stdc++ ...
jQuery扩展插件和拓展函数的写法
<script type="text/JavaScript"> //jQuery插件的写法(需要传入操作对象) ;(function ...
共享内存最快IPC 的原因
参考 http://www.360doc.com/content/13/0817/11/7377734_307777806.shtml 我的理解,这里指的是用户进程的用户态空间和内核空间,也就是那个3 ...

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

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

随机推荐

热门专题