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与flash交互通信基础教程
Aug 07 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
html中select语句读取mysql表中内容
2006/10/09 PHP
php 缓存函数代码
2008/08/27 PHP
PHP Directory 函数的详解
2013/03/07 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python下MySQLdb用法实例分析
2015/06/08 Python
python 简单的多线程链接实现代码
2016/08/28 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python和Go语言的区别总结
2019/02/20 Python
浅谈Python协程
2020/06/17 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
文明礼仪标语
2014/06/13 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
研究生导师评语
2014/12/31 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
导游词之井冈山
2019/11/20 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python