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

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: 'www.jb51.net'},
  { image: 'images/zzsc2.png', heading: '我们', description: 'www.jb51.net' },
  { image: 'images/zzsc3.png', heading: '我们', description: 'www.jb51.net' },
  { image: 'images/zzsc4.png', heading: '我们', description: 'www.jb51.net' },
  { image: 'images/zzsc5.png', heading: '我们', description: 'www.jb51.net' },
  { image: 'images/zzsc6.png', heading: '我们', description: 'www.jb51.net' }
  ];
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>

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

赞 (0)

相关推荐

  • jQuery旋转木马式幻灯片轮播特效

    jQuery旋转木马式幻灯片轮播特效

    本文为大家分享anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件,它适合在PC端与移动端实现旋转木马幻灯片特效.具体内容如下 特点 响应式--适应任何视窗的宽度 混合内容 不需要CSS 轻量级(< 8 kb未压缩) 基于jQuery构建 集成图像预加载 回调函数--onConstruct onStart,onEnd 多个可配置选项 延迟加载图片 自动旋转 容易扩展 jquery实例:anoSlide使用方法 引入核心文件 <script src="js/jquery/1

  • jQuery实现可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat 继承性: no 版本: CSS3 JavaScript 语法: object.style.transformStyle="preserve-3d" 有2个属性值可选

  • jquery实现的3D旋转木马特效代码分享

    jquery实现的3D旋转木马特效代码分享

    本文实例讲述了jquery实现的3D旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的3D旋转木马特效代码,适合用于产品展示,便于用户循环浏览产品细节,是一款非常实用的特效代码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现的3D旋转木马特效代码如下 <head> <meta http-equiv=

  • jQuery右下角旋转环状菜单特效代码

    jQuery右下角旋转环状菜单特效代码

    jquery实现右下角旋转环形菜单特效代码,是固定在页面右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css制作动画效果. 效果图如下: 在线预览    点击下载 html代码: <div class="htmleaf-container"> <div id='ss_menu'> <div> <i class="fa fa-qq"></i> </div>

  • jQuery平滑旋转幻灯片特效代码分享

    jQuery平滑旋转幻灯片特效代码分享

    本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义请修改jQuery-jcImgScroll.js. 运行效果图:               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. js关键代码: <script src="js/jQuery-1.7.1.j

  • 基于jQuery实现自动轮播旋转木马特效

    基于jQuery实现自动轮播旋转木马特效

    本文实例讲述了jQuery实现自动轮播旋转木马特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单. 运行效果图:           -------------------查看效果 下载源码------------------- 简要教程 jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件.该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果.  使用方法 该jQuery旋转

  • jQuery实现的产品自动360度旋转展示特效源码分享

    jQuery实现的产品自动360度旋转展示特效源码分享

    这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

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

    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); -we

  • 基于jQuery插件jqzoom实现的图片放大镜效果示例

    基于jQuery插件jqzoom实现的图片放大镜效果示例

    本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果.分享给大家供大家参考,具体如下: jqzoom插件实现图片放大镜效果. 图1.1jqzoom插件实现图片放大镜效果 1.引入jqurty和jqzoom插件 <script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script> <script src="/js/common/jquer

  • jQuery插件实现多级联动菜单效果

    jQuery插件实现多级联动菜单效果

    开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

  • 基于jQuery实现响应式圆形图片轮播特效

    基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有: 使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的HTML内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器,支持IE8+浏览器 引入核心文件 mislider插依赖于一些插件,在引入之前要先引入jQuery.html5shiv.j

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • jquery实现美观的导航菜单鼠标提示特效代码

    jquery实现美观的导航菜单鼠标提示特效代码

    本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 基于Jquery插件Uploadify实现实时显示进度条上传图片

    基于Jquery插件Uploadify实现实时显示进度条上传图片

    先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • jQuery插件实现手风琴二级菜单

    jQuery插件实现手风琴二级菜单

    本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单,供大家参考,具体内容如下 HTML5结构要求: <div id="accordion"> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> <div> <p

  • jquery插件实现悬浮的菜单

    jquery插件实现悬浮的菜单

    每天学一个jquery插件-悬浮的菜单,供大家参考,具体内容如下 悬浮的菜单 又是一个很常见的效果,用上了a标签的一个常见的特性-锚点 效果如下 代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>悬浮的菜单</title> <script src="js/jquery-3.4.1.min.js"><

随机推荐