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