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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
PHP新手上路(十)
2006/10/09 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
公司薪酬管理制度
2014/01/31 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
水电施工员岗位职责
2015/04/11 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
安全生产协议书
2016/03/22 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技