jQuery圆形循环信息展示插件

当前位置:主页 > jQuery库 > 布局和界面 > jQuery圆形循环信息展示插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
jQuery圆形循环信息展示插件
分享:

    插件介绍

    CircleBoxInfo是一款简单实用jQuery圆形循环信息展示插件。所有的预置信息以节点的方式分布在一个圆环上,你可以设置自动循环播放信息,也可以让用户手动点击展示信息。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-11
    阅读:
简要教程

CircleBoxInfo是一款简单实用jQuery圆形循环信息展示插件。所有的预置信息以节点的方式分布在一个圆环上,你可以设置自动循环播放信息,也可以让用户手动点击展示信息。它的特点还有:

  • 可以设置是否自动播放。
  • 可以控制自动播放的速度。
  • 可以通过CSS breakpoint来控制响应式效果。
  • 控制是点击还是鼠标滑过时展示信息。
  • 可以通过CSS来控制节点样式。
  • 可以控制节点的移动顺序。

圆形循环信息展示效果

使用方法

HTML结构

该圆形循环信息展示效果的基本HTML结构如下:

<div class="circle2">
    <ul class="circleWrapper">
        <li>
            <div class="circleFeature" data-cyrcleBox="feature1"></div>
            <div class="circleBox" id="feature1"></div>
        </li>
    </ul>
</div>
                
初始化插件

在页面DOM元素加载完毕之后可以通过s8CircleInfoBox()方法来初始化该插件。

$(".circle2").s8CircleInfoBox();                
                

配置参数

CircleBoxInfo插件可用的配置参数如下:

  • autoSlide:是否自动播放。默认值为true
  • slideSpeed:自动播放的速度。默认值为3000,单位毫秒。
  • notResponsive:是否使用响应式效果。默认值为false
  • action:是鼠标滑过还是鼠标点击来激活节点事件。默认为"mouseover"
  • responsive:响应式断点。默认为760像素。
  • hoverStyle:鼠标滑过节点时的CSS class类。默认为"circleSelect"
  • spreadStyle:节点的传播方向。默认为"all",可以是:top、left、right、bottom。

CircleBoxInfo插件的github地址为:https://github.com/soori8/CircleBoxInfo

网友评论