基于jQuery环形图标菜单旋转切换特效

最新推荐文章于 2021-06-16 23:16:42 发布

转载最新推荐文章于 2021-06-16 23:16:42 发布 · 525 阅读

文章标签：

#javascript #ViewUI

分享一款使用jQuery实现的鼠标点击图标菜单圆形顺时针或逆时针旋转切换特效，包括代码实现和在线预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一款基于jQuery环形图标旋转切换特效。这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码。效果图如下：

在线预览源码下载

实现的代码。

js代码：

/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '爱编程', description: '***'},
                { image: 'images/zzsc2.png', heading: '爱编程', description: '***' },
                { image: 'images/zzsc3.png', heading: '爱编程', description: '***' },
                { image: 'images/zzsc4.png', heading: '爱编程', description: '***' },
                { image: 'images/zzsc5.png', heading: '爱编程', description: '***' },
                { image: 'images/zzsc6.png', heading: '爱编程', description: '***' }
                ];

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://***/Article/37857