zoukankan      html  css  js  c++  java
  • js 实现单行文本滚动效果

    js 代码如下:

    /***************滚动场次开始*****************/
    
    function ScrollText(content, btnPrevious, btnNext, autoStart) {
        this.Delay = 10;
        this.LineHeight = 20;
        this.Amount = 1; 
        this.Direction = "up";
        this.Timeout = 1500;
        this.ScrollContent = this.$(content);
        this.ScrollContent.innerHTML += this.ScrollContent.innerHTML;
        //this.ScrollContent.scrollTop = 0;
        if (btnNext) {
            this.NextButton = this.$(btnNext);
            this.NextButton.onclick = this.GetFunction(this, "Next");
            this.NextButton.onmouseover = this.GetFunction(this, "Stop");
            this.NextButton.onmouseout = this.GetFunction(this, "Start");
        }
        if (btnPrevious) {
            this.PreviousButton = this.$(btnPrevious);
            this.PreviousButton.onclick = this.GetFunction(this, "Previous");
            this.PreviousButton.onmouseover = this.GetFunction(this, "Stop");
            this.PreviousButton.onmouseout = this.GetFunction(this, "Start");
        }
        this.ScrollContent.onmouseover = this.GetFunction(this, "Stop");
        this.ScrollContent.onmouseout = this.GetFunction(this, "Start");
        if (autoStart) {
            this.Start();
        }
    }
    
    ScrollText.prototype.$ = function (element) {
        return document.getElementById(element);
    }
    
    ScrollText.prototype.Previous = function () {
        clearTimeout(this.AutoScrollTimer);
        clearTimeout(this.ScrollTimer);
        this.Scroll("up");
    }
    
    ScrollText.prototype.Next = function () {
        clearTimeout(this.AutoScrollTimer);
        clearTimeout(this.ScrollTimer);
        this.Scroll("down");
    }
    
    ScrollText.prototype.Start = function () {
        clearTimeout(this.AutoScrollTimer);
        this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
    }
    
    ScrollText.prototype.Stop = function () {
        clearTimeout(this.ScrollTimer);
        clearTimeout(this.AutoScrollTimer);
    }
    
    ScrollText.prototype.AutoScroll = function () {
        if (this.Direction == "up") {
            if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
                this.ScrollContent.scrollTop = 0;
            }
            this.ScrollContent.scrollTop += this.Amount;
        } else {
            if (parseInt(this.ScrollContent.scrollTop) <= 0) {
                this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
            }
            this.ScrollContent.scrollTop -= this.Amount;
        }
        if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
            this.ScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Delay);
        } else {
            this.AutoScrollTimer = setTimeout(this.GetFunction(this, "AutoScroll"), this.Timeout);
        }
    }
    
    ScrollText.prototype.Scroll = function (direction) {
        if (direction == "up") {
            if (this.ScrollContent.scrollTop == 0) {
                this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2;
            }
            this.ScrollContent.scrollTop -= this.Amount;
        } else {
            this.ScrollContent.scrollTop += this.Amount;
        }
        if (parseInt(this.ScrollContent.scrollTop) >= parseInt(this.ScrollContent.scrollHeight) / 2) {
            this.ScrollContent.scrollTop = 0;
        }
        if (parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) {
            this.ScrollTimer = setTimeout(this.GetFunction(this, "Scroll", direction), this.Delay);
        }
    }
    
    ScrollText.prototype.GetFunction = function (variable, method, param) {
        return function () {
            variable[method](param);
        }
    }
    
    if (document.getElementById("ul_round")) {
        var scrollup = new ScrollText("ul_round");
        scrollup.LineHeight = 40;        //单排文字滚动的高度
        scrollup.Amount = 1;            //注意:子模块(LineHeight)一定要能整除Amount.
        scrollup.Delay = 30;           //延时
        scrollup.Start();             //文字自动滚动
        scrollup.Direction = "up";   //默认设置为文字向上滚动
    }
    /***************滚动场次结束*****************/

    html代码:

    <ul id="ul_round">
                        <li>今天上午场<b class="c_c00">10:00-11:00</b>,
                                已经结束
                        </li>
                        <li>今天下午场<b class="c_c00">14:30-15:30</b>,
                                已经结束
                        </li>
                        <li>今天临时场次<b class="c_c00">16:00-16:15</b>,
                                已经结束
                        </li>
            
                        <li>今天上午场<b class="c_c00">10:00-11:00</b>,
                                已经结束
                        </li>
                        <li>今天下午场<b class="c_c00">14:30-15:30</b>,
                                已经结束
                        </li>
                        <li>今天临时场次<b class="c_c00">16:00-16:15</b>,
                                已经结束
                        </li>
            </ul>
  • 相关阅读:
    面试题总结
    软件测试面试心得
    git上传本地文件到gitee上
    一个测试员失业的自述
    整理了Linux常用命令变量
    java B2B2C多用户商城系统-搜索分词架构分享
    B2B2C商城系统-Table组件封装代码分享
    Javashop 电商系统sso登录实现
    b2b2c商城系统-会员预存款架构及源码分享
    java 商城系统源码分享-snowflake发号器
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3384617.html
Copyright © 2011-2022 走看看