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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
JavaScript实现登录窗体
Jun 22 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通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Angular排序实例详解
2017/06/28 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
python中zip()方法应用实例分析
2016/04/16 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python异常处理操作实例详解
2018/08/28 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python3转换code128条形码的方法
2019/04/17 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python代码实现图书管理系统
2020/11/30 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
机电专业大学生求职信
2013/10/04 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
公司委托书格式范文
2014/04/04 职场文书
公司投资建议书
2014/05/16 职场文书
五好关工委申报材料
2014/05/31 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python