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查看对象功能代码
Apr 25 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue-resourc发起异步请求的方法
Feb 11 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
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
js实现密码强度检验
2017/01/15 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
基于js 本地存储(详解)
2017/08/16 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python self,cls,decorator的理解
2009/07/13 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
scrapy爬虫完整实例
2018/01/25 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python实现简单日期工具类
2019/04/24 Python
Python猴子补丁知识点总结
2020/01/05 Python
python 异步async库的使用说明
2020/05/04 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
大学生毕业鉴定
2014/01/31 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB