基于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 20 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
再谈JavaScript线程
Jul 10 Javascript
简单的jQuery入门指引
Jul 28 Javascript
chrome调试javascript详解
Oct 21 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
mock.js模拟前后台交互
Jul 25 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python and、or以及and-or语法总结
2015/04/14 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
详解python中的数据类型和控制流
2019/08/08 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python新手学习可变和不可变对象
2020/06/11 Python
python交互模式基础知识点学习
2020/06/18 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
小班下学期个人总结
2015/02/12 职场文书
会计做账心得体会
2016/01/22 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
JS实现扫雷项目总结
2021/05/19 Javascript
Redis全局ID生成器的实现
2022/06/05 Redis