基于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

时间: 2024-11-09 02:21:27

基于jQuery环形图标菜单旋转切换特效的相关文章

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

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp

基于CSS3鼠标经过立体翻转切换特效

基于CSS3鼠标经过立体翻转切换特效.这是一款基于jQuery+CSS3实现的鼠标经过封面和详情3D翻转切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapbox YaHei"> <div class="cont-box"> <div class="regularly-box"> <div class="regularly-head&qu

基于jQuery全屏焦点图切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed:

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

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

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

非常炫的图片旋转滑动特效,相信会给你留下深刻印象.滑动图像时,我们会稍稍旋转它们并延缓各元素的滑动.滑块的不寻常的形状是由一些预先放置的元素和使用边框创建.另外支持自动播放选项,鼠标滚轮的功能. 在线演示      下载源码 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插件

基于jQuery图文排版图片预览特效

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 在线预览   源码下载 实现的代码. html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscreen-inner-button">&

基于HTML5 SVG全屏滑块切换特效

基于HTML5 SVG全屏滑块切换特效是一款基于jQuery+HTML5实现的全屏动画切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="visible"> <div style=" position:fixed; z-inde

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

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

基于jquery宽屏菜单导航【精品】

demo预览地址:http://www.qhttl.com/content/view/2014/07/18/jiaoben75/jiaoben75/index.html 下载地址:基于jquery宽屏菜单导航 基于jquery宽屏菜单导航[精品],布布扣,bubuko.com