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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
showModelessDialog()使用详解
Sep 21 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
chrome调试javascript详解
Oct 21 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
详解JWT token心得与使用实例
Aug 02 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
php操作access数据库的方法详解
2017/02/22 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
详解ES6中的let命令
2020/04/05 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python入门_条件控制(详解)
2017/05/16 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python关闭占用端口方式
2019/12/17 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
VC++笔试题
2014/10/13 面试题
大学专科生推荐信范文
2013/11/23 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
大学军训感想
2014/02/12 职场文书
党建工作先进材料
2014/05/02 职场文书
个人委托书怎么写
2014/09/17 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Django路由层如何获取正确的url
2021/07/15 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL