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 相关文章推荐
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JS截取字符串实例详解
Nov 24 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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
eAccelerator的安装与使用详解
2013/06/13 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php实现可逆加密的方法
2015/08/11 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
mouse_on_title.js
2006/08/25 Javascript
广告显示判断
2006/08/31 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
js实现圆盘记速表
2015/08/03 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
简单了解python中的与或非运算
2019/09/18 Python
Django框架请求生命周期实现原理
2020/11/13 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
python wsgiref源码解析
2021/02/06 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
教师一岗双责责任书
2014/04/16 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书