Skip to content
可回调刻度时间播放条
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
scripts
styles
.gitignore
README.md
index.html

README.md

autoTime

时间播放轴

点击查看 demo


注意事项:

  • 发现bug或技术上的交流请发邮件到:xyzsyx@163.com

  • 本插件依赖jQuery库

  • 当插件父容器的宽度发生改变,且本插件没有自动调整布局时,请手动调用本插件重新布局方法:

      Index.reLayout(delay);
    

    参数delay为延迟执行的毫秒数(如有动画,重新布局应在发生宽度改变动画结束后调用)

  • 已知Bug

      transition: true //执行第一刻度时有延迟
      transition: false //游标到达最后一个刻度时刻度样式未变及未执行回调
    

使用方法:

  1. 导入样式表

    <link rel="stylesheet" type="text/css" href="styles/autoTime.css"></link>
  2. 导入jquery库文件和autoTime.js

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="scripts/index.js"></script>
  3. DOM

    <div class="autoTime" id="autoTime1">
        <ul class="time-bgs">
            <li class="time-left"></li>
            <li class="time-bg">
                <div><span></span></div>
            </li>
            <li class="time-right"></li>
            <li class="time-oper">
                <i class="time-prev"></i>
                <i class="time-status"></i>
                <i class="time-next"></i>
            </li>
            <li class="time-position">
                <ul class="time-graduationCon"></ul>
            </li>
        </ul>
    </div>
  4. 调用 / 初始化

    var autoTime = new AutoTime($("#autoTime"));

  • 参数

Index(object[,option][,callback]) {

object (必需): {jQuery | $}

jQuery对象 或 css选择器

option (可选): {Object}

配置参数集合

#####配置参数

autoPlay: {boolean} default true
载入时是否自动播放
playOnce: {boolean} default false
是否只自动播放一次,依赖 autoPlay=true
transition: {boolean} default false
是否启用周期倒退过渡,依赖 autoPlay=true
当游标到达时间轴末尾时,自动使用动画回退游标到时间轴起始位置,否则直接跳到起始位置开始下一周期
autoPlaySpeed: {number} default 4000ms
播放一个完整刻度的时间(ms),依赖 autoPlay=true
buttonPosition: {string} default "right"
操作按钮相对于组件的位置(可选值“left”、“right”或“”)
clickSpeed: {number} default 1000
点击按钮最低时间间隔
range: {[Array, string]}
时间轴刻度值数组

######数组元素释义

Array 时间轴刻度值(支持三种时间格式,1970-1-1、1970/1/1或1970.1.1)
string 时间显示类型(可选值“year”[默认]、“month”或“day”)

callback (可选): {Object}

回调函数

  • 方法

reLayout([delay])

重新布局函数
参数delay可选,默认0

pause()

暂停/继续
当处于播放状态时,调用此函数暂停
当处于暂停状态时,调用此函数继续播放

resetGraduation()

重置刻度

closestGraduation()

获取离游标最近的一个刻度点
You can’t perform that action at this time.