• 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()

  • 相关阅读:
    枯燥的数据库“三级模式”
    SQL Server四个“系统数据库”作用的简介
    数据库的范式
    使用JMeter进行分布式性能测试
    使用JMeter测试你的EJB
    jmeter资源监控器开发——进入jmeter的源码世界
    如何解决使用JMeter时遇到的问题
    安装jmeter
    SMTP错误码/建议解决方法
    Jmeter接口测试 实例
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14366804.html
Copyright © 2020-2023  润新知