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笔记一 js以及json基础使用说明
May 22 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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读取30天之内的根据算法排序的代码
2008/04/06 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python opencv实现切变换 不裁减图片
2018/07/26 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
关于诚信的活动方案
2014/08/18 职场文书
2014年售票员工作总结
2014/11/19 职场文书
运动会表扬稿
2015/01/16 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
经典爱情感言
2015/08/03 职场文书
小学班主任心得体会
2016/01/07 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
小程序实现侧滑删除功能
2022/06/25 Javascript