基于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实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python制作小说爬虫实录
2017/08/14 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python版名片管理系统
2018/11/30 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
性能服装:HYLETE
2018/08/14 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
纺织工程专业个人求职信范文
2014/01/27 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
python实现简易名片管理系统
2021/04/11 Python
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL