基于jQuery环形图标菜单旋转切换特效
分享一款基于jQuery环形图标旋转切换特效。这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码。效果图如下:
实现的代码。
js代码:
/* 图片地址可以是相对路径或绝对路径;标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '爱编程', description: 'www.w2bc.com'},
{ image: 'images/zzsc2.png', heading: '爱编程', description: 'www.w2bc.com' },
{ image: 'images/zzsc3.png', heading: '爱编程', description: 'www.w2bc.com' },
{ image: 'images/zzsc4.png', heading: '爱编程', description: 'www.w2bc.com' },
{ image: 'images/zzsc5.png', heading: '爱编程', description: 'www.w2bc.com' },
{ image: 'images/zzsc6.png', heading: '爱编程', description: 'www.w2bc.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();
via:http://www.w2bc.com/Article/37857
基于jQuery环形图标菜单旋转切换特效的更多相关文章
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览 源码下载 来看下实现的 ...
- jquery环形3D立体旋转特效
jquery环形3D立体旋转特效 作者/代码整理:站长素材 (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20 立体效果比较强的jquery特效,周围小图组 ...
- Rotating Image Slider - 图片旋转切换特效
非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...
- 基于jQuery扁平多颜色选项卡切换代码
基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 基于jQuery左侧大图右侧小图切换代码
基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
随机推荐
- Linux IO系统分析(scsi篇)
一.概述 Linux内核中SCSI子系统由SCSI上层,中间层,底层驱动模块三部分组成,负责管理SCSI资源和处理其他子系统,如文件系统,提交到SCSI子系统中的IO请求. 因此,理解SCSI子系统的 ...
- 使用嵌入式关系型SQLite数据库存储数据
除了可以使用文件或SharedPreferences存储数据,还可以选择使用SQLite数据库存储数据. 在Android平台上,集成了一个嵌入式关系型数据库—SQLite, 1.SQLite3支持 ...
- SQL数据缓存依赖总结
以前只听过SQL server数据缓存依赖,但一直没使用,由于项目需要,才研究了一番,发现了一个很诡异的问题,竟然是一个操作顺序问题导致的. SQL server数据缓存依赖有两种实现模式,轮询模式, ...
- eclipse导入class文件
右键src文件夹->build path->config build path->library->add class folder->create new folder ...
- spring 定时任务执行两次解决办法
在web.xml中同时配置了ContextLoaderListener和DispatcherServlet?假如真是这样的话,需要删掉一个配置,因为你相当于配置了两个spring容器,两个容器分别都执 ...
- [转]Tomcat中的Session小结
阅读目录 什么是Session Session的目的 实现机制 Tomcat中的session实现 session存在的问题 什么是Session 对Tomcat而言,Session是一块在服务器开辟 ...
- 转 RabbitMQ 基础概念及 Spring 的配置和使用 推荐好文 举例讲解
从不知道到了解—RabbitMQ 基础概念及 Spring 的配置和使用 原理同上 请求地址:http://localhost:8080/home?type=3&routing_key=myO ...
- struts2:OGNL表达式之#、%、$符号运用
1. OGNL表达达符号"#" 1.1 #用于访问OGNL上下文和Action上下文,#相当于ActionContext.getContext() 注意:当系统创建了Action实 ...
- ubuntu18.04优盘只读问题
1.打开终端,查看系统日志文件: tail -f /var/log/syslog 2.插入优盘. 3.系统文集syslog输出以下内容: Feb :: noi dbus-daemon[]: [sess ...
- Ubuntu 脚本笔记
.Update Ubuntu :apt-get update :apt-get upgrade :apt-get dist-upgrade .Create swap on aliyun ubuntu( ...