基于jQuery插件实现环形图标菜单旋转切换特效


Posted in Javascript onMay 15, 2015

feature.presenter.1.5.css

body {
 margin: 0;
 font-family: Tahoma;
}

.feature-presenter {
 position: absolute;
}

.feature-presenter-icon {
 background-color: white;
 text-align: center;
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 border-radius: 50%;
 cursor: pointer;
}

.feature-presenter img {
 max-width: 100%;
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 border-radius: 50%;
 cursor: pointer;
 box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
 filter: blur(0px);
 -webkit-filter: blur(0px);
 image-rendering: -webkit-optimize-contrast;
}

.feature-presenter i {
 font-size: 85px;
 /*filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');*/
}

.feature-presenter-circle-container {
 border-radius: 50%;
 display: inline-block;
 border: 1px solid rgba(0,0,0,0.09);
 box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
 transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
 background-color: white;
}

.feature-presenter-text-container {
 line-height: 1.3;
 display: inline-block;
 vertical-align: top;
 z-index: 1001;
 position: relative;
 overflow: hidden;
}

.feature-presenter-text-heading {
 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.8);
}

.feature-presenter-text-description {
 -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
  color: rgba(0, 0, 0, 0.5);
}

.feature-presenter-text-container-out {
 -webkit-transform: translate(200%, 0);
  transform: translate(200%, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in;
  transition: transform 0.5s ease-in;
}

html:

<!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>基于jQuery环形图标菜单旋转切换特效</title>
<link href='css/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="test-element"></div>
<script src="js/feature.presenter.1.5.min.js"></script>
<script>
/* 图片地址可以是相对路径或绝对路径;标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '三水点靠木', description: '3water.com'},
  { image: 'images/zzsc2.png', heading: '三水点靠木', description: '3water.com' },
  { image: 'images/zzsc3.png', heading: '三水点靠木', description: '3water.com' },
  { image: 'images/zzsc4.png', heading: '三水点靠木', description: '3water.com' },
  { image: 'images/zzsc5.png', heading: '三水点靠木', description: '3water.com' },
  { image: 'images/zzsc6.png', heading: '三水点靠木', description: '3water.com' }
  ];
var options = {
 circle_radius: 220,
 normal_feature_size: 100,
 highlighted_feature_size: 150,
 top_margin: 100,
 bottom_margin: 50,
 spacing: 40,
 min_padding: 50,
 heading_font_size: 30,
 description_font_size: 20,
 type: 'image'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
</script>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
js生成验证码并直接在前端判断
May 15 #Javascript
javascript实现表格增删改操作实例详解
May 15 #Javascript
javascript实现可全选、反选及删除表格的方法
May 15 #Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
You might like
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
php合并js请求的例子
2013/11/01 PHP
php引用传值实例详解学习
2013/11/06 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php获取url参数方法总结
2014/11/13 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
2014年学校教学工作总结
2014/12/06 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技