【新手练习】类似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 ...

随机推荐

读取excel到数据库里面
//读取excel数据到dataTable里面 public DataTable ReadExcelDataToDataTable(string path) { DataTable dt = new ...
sequenza细胞纯度计算
安装sequenza bam文件要放在前面,否侧会-f命令可能识别错误 samtools mpileup a.bam -f hg19.fasta -Q 20 |gzip > normal.pil ...
Android——GridLayout
转载自http://www.cnblogs.com/over140/archive/2011/12/08/2280224.html 欢迎大家转载前言本章内容android.widget.GridL ...
bzoj 2242: [SDOI2011]计算器 BSGS+快速幂+扩展欧几里德
2242: [SDOI2011]计算器 Time Limit: 10 Sec Memory Limit: 512 MB[Submit][Status][Discuss] Description 你被 ...
yii-mail yii 发送邮件
参考网址:http://shoukii0721.iteye.com/blog/1576225 有很多时候我们需要给用户发送邮件,作留言,或者是激活邮件.等用途. 需要注意的是,设置发送的邮件得有SMT ...
正则的小效果：-------> 过滤敏感词
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
POJ 3181 Dollar Dayz && Uva 147 Dollars（完全背包）
首先是 Uva 147:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_p ...
从linux系统mysql导出数据库
原文:http://blog.csdn.net/lifuxiangcaohui/article/details/50763674 1.MySQL数据库导出 /usr/local/mysql/bin/m ...
转！！MAC和PHY的区别
一块以太网网卡包括OSI(开方系统互联)模型的两个层,物理层和数据链路层.物理层定义了数据传送与接收所需要的电与光信号.线路状态.时钟基准.数据编码和电路等,并向数据链路层设备提供标准接口.数据链路层 ...
jquery select选中项赋值
$("flag").attr("value",flag); $("#flag").find("option:selected&qu ...

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

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

随机推荐

热门专题