JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码：zb1c
圆形多选菜单选项效果：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery圆形多选菜单选项DEMO演示</title>
<link rel="stylesheet" href="css/style.css">
</head> <body> <div class='selector'>
<ul>
<li>
<input id='1' type='checkbox'>
<label for='1'>1</label>
</li>
<li>
<input id='2' type='checkbox'>
<label for='2'>2</label>
</li>
<li>
<input id='3' type='checkbox'>
<label for='3'>3</label>
</li>
<li>
<input id='4' type='checkbox'>
<label for='4'>4</label>
</li>
<li>
<input id='5' type='checkbox'>
<label for='5'>5</label>
</li>
<li>
<input id='6' type='checkbox'>
<label for='6'>6</label>
</li>
<li>
<input id='7' type='checkbox'>
<label for='7'>7</label>
</li>
<li>
<input id='8' type='checkbox'>
<label for='8'>8</label>
</li>
</ul>
<button>Gary</button>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.html
var angleStart = -360;
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('label')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
setTimeout(function() { toggleOptions('.selector'); }, 100);
index.js
html, body {
height: 100%;
}
body {
margin: 0;
background: linear-gradient(#eee, #ccc);
overflow: hidden;
}
.selector {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-top: -70px;
margin-left: -70px;
}
.selector, .selector button {
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
.selector button {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: #428bca;
border-radius: 50%;
border: 0;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all .1s;
}
.selector button:hover {
background: #3071a9;
}
.selector button:focus {
outline: none;
}
.selector ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
.selector li {
position: absolute;
width: 0;
height: 100%;
margin: 0 50%;
-webkit-transform: rotate(-360deg);
transition: all 0.8s ease-in-out;
}
.selector li input {
display: none;
}
.selector li input + label {
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
line-height: 1px;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
font-size: 1px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
.selector li input + label:hover {
background: #f0f0f0;
}
.selector li input:checked + label {
background: #5cb85c;
color: white;
}
.selector li input:checked + label:hover {
background: #449d44;
}
.selector.open li input + label {
width: 80px;
height: 80px;
line-height: 80px;
margin-left: -40px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
style.css
实现过程
CSS
选择 按钮
.selector button {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
background: #428bca;
border-radius: 50%;
border: 0;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all .1s;
}
cursor 属性规定要显示的光标的类型（pointer 光标呈现为指示链接的指针）
选择 标签
.selector li {
position: absolute;
width: 0;
height: 100%;
margin: 0 50%;
-webkit-transform: rotate(-360deg);
transition: all 0.8s ease-in-out;
}
transition-property 属性规定应用过渡效果的 CSS 属性的名称
all 所有属性都将获得过渡效果
0.8s 属性过渡时间
ease-in-out 规定以慢速开始和结束的过渡效果
鼠标触碰按钮时变化颜色
.selector button:hover {
background: #3071a9;
}
子标签初始化旋转效果
.selector li input + label {
position: absolute;
left: 50%;
bottom: 100%;
width: 0;
height: 0;
line-height: 1px;
margin-left: 0;
background: #fff;
border-radius: 50%;
text-align: center;
font-size: 1px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}
鼠标触碰子标签时显示的颜色
.selector li input + label:hover {
background: #f0f0f0;
}
子标签的颜色
.selector li input:checked + label:hover {
background: #449d44;
}
子标签文字的颜色
.selector li input:checked + label {
background: #5cb85c;
color: white;
}
JS
设置标签旋转度数
var angleStart = -360;
多选菜单旋转动画
function rotate(li,d) {
$({d:angleStart}).animate({d:d}, {
step: function(now) {
$(li)
.css({ transform: 'rotate('+now+'deg)' })
.find('label')
.css({ transform: 'rotate('+(-now)+'deg)' });
}, duration: 0
});
}
duration ：返回动画当前时间长度
显示/影藏多选菜单
function toggleOptions(s) {
$(s).toggleClass('open');
var li = $(s).find('li');
var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
for(var i=0; i<li.length; i++) {
var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
$(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
}
}
find() 方法获得当前元素集合中每个元素的后代（获得全部的li标签）
hasClass() 方法检查被选元素是否包含指定的 class
(找到了子标签旋转出来，没找到子标签旋转回去)
点击按钮调用toggleOptions(s)函数
$('.selector button').click(function(e) {
toggleOptions($(this).parent());
});
parent() 获得当前匹配元素集合中每个元素 (获得元素全部标签)
设置动作时间
setTimeout(function() { toggleOptions('.selector'); }, 100);
DOM
<div class='selector'>
<ul>
<li>
<input id='1' type='checkbox'>
<label for='1'>1</label>
</li>
<li>
<input id='2' type='checkbox'>
<label for='2'>2</label>
</li>
<li>
<input id='3' type='checkbox'>
<label for='3'>3</label>
</li>
<li>
<input id='4' type='checkbox'>
<label for='4'>4</label>
</li>
<li>
<input id='5' type='checkbox'>
<label for='5'>5</label>
</li>
<li>
<input id='6' type='checkbox'>
<label for='6'>6</label>
</li>
<li>
<input id='7' type='checkbox'>
<label for='7'>7</label>
</li>
<li>
<input id='8' type='checkbox'>
<label for='8'>8</label>
</li>
</ul>
<button>Gary</button>
</div>
JS框架_(JQuery.js)圆形多选菜单选项的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- JS框架_(JQuery.js)网页文字评论弹幕
百度云盘 传送门 密码:3azl jQuery网页右下角文字评论弹幕效果 <!DOCTYPE html> <html> <head> <title>jQ ...
- JS框架_(JQuery.js)高德地图api
百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(JQuery.js)点赞按钮动画
百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
随机推荐
- CVE-2018-20169漏洞学习
简介 在4.19.9之前的Linux内核中发现了一个问题.USB子系统在读取与驱动程序/ USB /core/usb.c中的_usb_get_extra_descriptor相关的额外描述符时错误地检 ...
- 第三章 联接查询 T-SQL语言基础
联接查询 sql server 2008支持四种表运算符----JOIN,APPLY,PIVOT,UNPIVOT. JOIN表运算符是ANSI标准,而APPLY,PIVOT,UNPIVOT是T-SQL ...
- 数据绑定-集合List绑定
users.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- oracle服务端字符集
一.oracle服务端字符集 SQL> select userenv('language') from dual ; USERENV('LANGUAGE')------------------- ...
- shell 删除文本中的重复行
三种常见方法:第一,用sort+uniq,注意,单纯uniq是不行的. shell> sort -k2n file | uniq > a.out 这里我做了个简单的测试,当file中的重复 ...
- Fiddler实现iPhone手机抓包
最近某小程序大火,许多非专业人员也在跃跃欲试,但是在查找自己的session_id的时候卡住了,本文只从技术方面介绍如何通过通过Fiddler来抓取手机的数据,不涉及如何作弊... 1.电脑上安装Fi ...
- 动画学习之Music图形绘制
今天来实现一个类似于网易云音乐类似的动态效果,在用网易云音乐听歌时会有一个类似这样的效果,如下: 而咱们这次要实现的效果如下: music图形的绘制: 在实现动画之前先来将静态的图形绘制出来, 如下: ...
- context容器上下文件
在web项目中想要获取哪个bean,得先得到容器上下文context public class MyLoaderListener extends ContextLoader implements Se ...
- radio赋值法
一般都会使用attr来使选中: $("#DIV的ID input[name='radio的name'][value="'+动态传的radio的value值+'"]&quo ...
- 构建的Web应用界面还不够好看？DevExtreme v19.1全新主题来袭
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将主要介绍介绍DevExtremev19.1中的数据可视化和主题控件,其中主要包含图表注释.增强图例功能等.欢迎下载v19 ...