当前位置:JS特效 » 其他 » jQuery圆形循环信息展示插件
 jQuery圆形循环信息展示插件
如果您觉得内容不错,请分享:
标签: 布局圆形环状

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:87
简要教程

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

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

圆形循环信息展示效果

使用方法

HTML结构

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

初始化插件

在页面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

Top