zoukankan      html  css  js  c++  java
  • jquery: 列表文字轮播

    <div class="kft-enroll" id="textScroll">
                            <ul class="enroll-list">
                                <li class="enroll-item">
                                    <span>137****5901</span>
                                    <span class="name">蓝城桃花源看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>147****5901</span>
                                    <span class="name">1-31看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>187****5901</span>
                                    <span class="name">桃花源看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>137****5901</span>
                                    <span class="name">蓝城花源看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>177****5401</span>
                                    <span class="name">2-16看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>167****5901</span>
                                    <span class="name">1-16看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>147****5901</span>
                                    <span class="name">12.12看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>137****5901</span>
                                    <span class="name">1.12看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>137****5901</span>
                                    <span class="name">2.2看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>147****5901</span>
                                    <span class="name">3.6看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>187****5901</span>
                                    <span class="name">3.12看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>137****5901</span>
                                    <span class="name">城桃花源看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                                <li class="enroll-item">
                                    <span>167****5901</span>
                                    <span class="name">蓝桃花源看房团</span>
                                    <span class="time">2021/02/16</span>
                                </li>
                            </ul>
                        </div>

    appendTo的用法:

    (function ($) {
        FCZX.globalNamespace('FCZX.TextScroll');
    
        FCZX.TextScroll = function (opt) {
            var _this = this;
            _this.opt = $.extend({}, {
                scrollS: '#textScroll',
                scrollItemS: '.enroll-item',
                speed: 'normal',
                scrollNum: 1,
                timer: 1000
            }, opt || {})
            _this._init()
        }
    
        FCZX.TextScroll.prototype._init = function () {
            var _this = this;
            _this.$scroll = $(_this.opt.scrollS);
            _this.$item = $(_this.opt.scrollItemS);
            _this._scroller();
        }
    
        FCZX.TextScroll.prototype._scroller = function () {
            var _this = this;
            var _opt = _this.opt;
            var $list = _this.$scroll.find('ul:eq(0)');
            var itemHeight = _this.$item.height() * _opt.scrollNum;
            var timerId;
            var towardUp = function () {
                $list.animate({ marginTop: -itemHeight }, _opt.speed, function () {
                    for (i = 0; i < _opt.scrollNum; i++) {
                        $list.find(_opt.scrollItemS + ":first").appendTo($list);
                    }
                    $list.css({ marginTop: 0 });
                })
            }
            var scrollerStop = function () {
                clearInterval(timerId);
            }
            var scrollerPlay = function () {
                timerId = setInterval(towardUp, _opt.timer);
            }
            $list.hover(scrollerStop, scrollerPlay).trigger("mouseout");
        }
    
    })(jQuery);

    new FCZX.TextScroll()

  • 相关阅读:
    51nod 1125 交换机器的最小代价
    货物运输 51Nod
    hihoCode 1075 : 开锁魔法III
    糖果
    区间 GCD
    poj2186--tarjan+缩点(有向图的强连通分量中点的个数)
    Hdu 4738【tanjan求无向图的桥】割边判定定理 dfn[x] < low[y]
    回文树介绍
    回文树总结
    140. 后缀数组(hash + 二分 / 后缀数组)
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14366804.html
Copyright © 2011-2022 走看看