分享一款基于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环形图标菜单旋转切换特效的更多相关文章

  1. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. 一款基于jquery超炫的图片切换特效

    今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的 ...

  3. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  4. Rotating Image Slider - 图片旋转切换特效

    非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线 ...

  5. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  6. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  7. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  8. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  9. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

随机推荐

  1. 搭建自己的 github.io 博客

    1.前言 github.io 是基于 Github 的 repo 管理,这意味着咱们对其是有绝对的控制,这个跟放在第三方的平台比,可控性要好太多. 使用 github pages 服务搭建博客的好处有 ...

  2. JS获取整个网页html代码

    var test=document.getElementsByTagName('html')[0].innerHTML; alert(test);

  3. MySQL-InnoDB Compact 行记录格式

    InnoDB存储引擎提供了compact(5.1后的默认格式)和redundant两个格式来存放行记录数据.redundant格式是为了兼容之前的版本而保留. mysql> show table ...

  4. iOS runtime执行时具体解释

    什么是runtime? runtime直译就是执行时间,run(跑,执行) time(时间),网上大家都叫它执行时,它是一套比較底层的纯C语言API,属于一个C语言库,包括了非常多底层的C语言API, ...

  5. MySQL中 optimize table '表名'的作用

    语法: optimize table '表名' 一,原始数据 1,数据量 2,存放在硬盘中的表文件大小 3,查看一下索引信息 索引信息中的列的信息说明. Table :表的名称.Non_unique: ...

  6. 配置IISserver

    我们自己开发站点的时候   要在自己的电脑上写网页 然后我们怎么能像我们浏览互联网上的网页一样.而不是直接双击打开网页呢   这时候就要配置IISserver  让自己能够 预览自己站点的效果 以下是 ...

  7. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  8. flowable 的ProcessEngine配置

    1 flowable process engine 是通过  flowable.cfg.xml 配置文件配置的.在spring 环境中是使用 flowable-context.xml 配置文件的, P ...

  9. android 判断点击的位置是不是在指定的view上

    private boolean inRangeOfView(View view, MotionEvent ev){ int[] location = new int[2]; view.getLocat ...

  10. 解决Unity协程无法同步返回的问题

    Unity的协程是轻量的异步解决方案,但是每调用一次yield就必须等下一帧才能继续,这一点带来了很多约束. 比如如下代码: void OnEnable() { StartCoroutine(_Do( ...