js实现单行文本向上滚动效果实例代码


Posted in Javascript onNovember 28, 2013
/***************滚动场次开始*****************/
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";   //默认设置为文字向上滚动
}
/***************滚动场次结束*****************/
Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
Vue详细的入门笔记
May 10 Vue.js
javascript获取元素CSS样式代码示例
Nov 28 #Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 #Javascript
JavaScript中的连字符详解
Nov 28 #Javascript
Google (Local) Search API的简单使用介绍
Nov 28 #Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 #Javascript
asm.js使用示例代码
Nov 28 #Javascript
jquery实现动态菜单的实例代码
Nov 28 #Javascript
You might like
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript事件问题
2009/09/05 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
python实现电脑自动关机
2018/06/20 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
总账会计岗位职责
2014/03/13 职场文书
双创工作实施方案
2014/03/26 职场文书
村庄绿化方案
2014/05/07 职场文书
运动会口号16字
2014/06/07 职场文书
求职意向书
2014/07/29 职场文书
歌咏比赛主持词
2015/06/29 职场文书
学生会任命书范本
2015/09/21 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android