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中的数学函数
Apr 04 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
Less 安装及基本用法
May 05 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
vue中动态添加class类名的方法
Sep 05 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 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
php学习之 循环结构实现代码
2011/06/09 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python正则表达式之作业计算器
2016/03/18 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python 数据结构之队列的实现
2017/01/22 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Python是怎样处理json模块的
2020/07/16 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
态度决定一切演讲稿
2014/05/20 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js