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计数器代码
Nov 04 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
Vue实现点击当前行变色
Dec 14 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实现将GB编码转换为UTF8
2006/11/25 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php实现paypal 授权登录
2015/05/28 PHP
php源码的安装方法和实例
2019/09/26 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
iview同时验证多个表单问题总结
2018/09/29 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Python设计模式之命令模式简单示例
2018/01/10 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
扬尘污染防治方案
2014/06/15 职场文书
公司周年庆活动方案
2014/08/25 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python