zoukankan      html  css  js  c++  java
  • 基于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

  • 相关阅读:
    层模型--绝对定位(position:absolute)
    什么是层模型?
    浮动模型
    流动模型(二)
    插值方法
    CFS调度分析(内核版本:2.6.34)
    CRC检验
    ubuntu误删home目录
    随想
    Android——Activity生命周期
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4503139.html
Copyright © 2011-2022 走看看