html弧形列表效果,jQuery效果 弧形弹出菜单
/p>
<
前端开发职描述及岗位:
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal
}
ol,
ul {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ”
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit
}
input,
textarea,
select {
*font-size: 100%
}
.hid {
text-indent: -9999px;
font-size: 0px;
overflow: hidden;
width: 0px;
height: 0px;
display: block
}
body {
padding-top: 42px;
min-width: 1000px;
font: 12px/150% tahoma, ‘b8bf53’, sans-serif;
}
.circle_menu_box {
position: fixed;
right: 30px;
bottom: 30px;
}
.menu_list li {
position: absolute;
width: 40px;
height: 40px;
background: blue;
color: #fff;
line-height: 40px;
text-align: center;
bottom: 2px;
right: 2px;
border-radius: 50%;
}
.btn_show {
width: 50px;
height: 50px;
bottom: 0;
right: 0;
position: absolute;
background: red;
z-index: 99;
border-radius: 50%;
font-size: 20px;
line-height: 50px;
text-align: center;
text-decoration: none;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
展开
(function () {
$menuList = $(‘#menu_list li’);
var listWidth = ($menuList.outerWidth()) / 2; // li元素宽度的一半
var listHeight = ($menuList.outerHeight()) / 2; // li元素高度的一半
var r = 220; // 圆弧半径
var menuNum = $menuList.length; // 菜单个数
var angle = 90; // 圆弧角度
var perAngle = angle / (menuNum – 1); // 菜单之间的角度
var posArr = []; // 存放每个元素right和bottom的数组
function showMenu() {
for (var i = 0; i < menuNum; i++) {
(function (num) {
posArr[num] = { ‘rightPos’: Math.sin((angle – perAngle * num) * Math.PI / 180) * r, ‘bottomPos’: Math.sin(perAngle * num * Math.PI / 180) * r }; //把每个li元素的位置存到数组里
})(i);
}
for (var i = 0; i < menuNum; i++) {
(function (a) {
setTimeout(function () {
$menuList.eq(a).stop().animate({ right: Math.floor(posArr[a].rightPos) – listWidth, bottom: Math.floor(posArr[a].bottomPos) – listHeight });
}, a * 50);
})(i);
}
}
function hideMenu() {
for (var i = 0; i < menuNum; i++) {
(function (a) {
setTimeout(function () {
$menuList.eq(a).stop().animate({ right: 2, bottom: 2 });
}, a * 50);
})(i);
}
}
$(‘.btn_show’).toggle(function () {
showMenu();
$(this).
}, function () {
hideMenu();
$(this).
});
})();
html弧形列表效果,jQuery效果 弧形弹出菜单相关推荐
- 糍粑大叔的独游之旅-u3d实现弹出菜单(上)-动态列表
在u3d5.x中,使用ugui作为默认的界面系统,但控件实在太少,很多需求都不能满足,比如弹出菜单(PopupMenu) 我也懒得去网上找现成的实现,再加上现有代码已经有很多有关列表控件的功能,不想再 ...
- JQuery弹出菜单时禁止页面(body)滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
- php jquery ajax登录,jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍 ...
- html5鼠标点击弹出层,jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现 ...
- android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...
- flutter向上动画弹出菜单效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 重要消息[视频教程 感兴趣的伙伴可以瞅瞅] 本文章最后的效果如下: 如上图的效果,当点击菜单按钮时,子菜单向上动画弹出,然后当点击弹出 ...
- Axure RP实例教程:组合弹出菜单效果
Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交互保真度的全方位构建,是目前业界首屈一指的交互式产品原 ...
- 仿闲鱼 底部菜单html,GitHub - 494293346/rotateMenu: 仿闲鱼首页,“底部加号弹出菜单选项” 界面,动画效果可能跟闲鱼有点不一样...
rotateMenu 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可能跟闲鱼有点不一样 ##简介 仿闲鱼首页,"底部加号弹出菜单选项" 界面,动画效果可 ...
- android中点击加号动画,android animation之scale 缩放(仿微信加号弹出菜单的动画效果)...
仿微信 +号 处理事件:弹出菜单的动画效果--缩放(反义词) 放大效果(缩小的代码只需将fromXScale和toXScale,:fromYScale和toYScale变换) android:inte ...
- jquery底部弹出菜单_带有jQuery的新鲜底部滑出菜单
jquery底部弹出菜单 View demo 查看演示Download Source 下载源 In this tutorial we will create a unique bottom slide ...
最新文章
- 位于/var/log目录下的20个Linux日志文件
- LevelDB 源码剖析(一)准备工作:环境搭建、接口使用、常用优化
- 软件配置管理(四)代码味道与重构
- kubernetes-Deployment部署无状态服务的原理详解(七)
- /proc 文件系统并使用/proc 进行输入
- YYKit学习系列 ---- 开篇
- libvpx在windows下的编译
- python简单的聚类分析代码_python kmeans聚类简单介绍和实现代码
- PyGame:Python 游戏编程入门-1
- 高中信息技术课程标准读后感
- 验证码错误的可能问题
- 电脑重装系统后c盘数据能恢复吗c盘重装后可以数据恢复吗
- linux解压img镜像文件,Linux系统上解压或挂载img文件的方法
- 只使用一个块级元素绘制各种图形
- String 源码浅析————终结篇
- 结构体变量的两种初始化方式
- 超越联系人跟踪应用程序
- 运用大数据手段 加快传统产业转型升级
- LeetCode第7题:整数反转
- 软件定义的网络(下)