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 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
vue基础知识--axios合并请求和slot
Jun 04 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 前一天或后一天的日期
2008/06/28 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
React应用中使用Bootstrap的方法
2017/08/15 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python2.7实现爬虫网页数据
2018/05/25 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python sorted函数的小练习及解答
2019/09/18 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
django queryset相加和筛选教程
2020/05/18 Python
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
投资意向书
2014/07/30 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
小学班主任心得体会
2016/01/07 职场文书
解除合同协议书范本
2016/03/21 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
PyTorch的Debug指南
2021/05/07 Python
vue3获取当前路由地址
2022/02/18 Vue.js