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的Pager分页器实现代码
Jul 17 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
js实现每日签到功能
Nov 29 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
JS原生实现轮播图的几种方法
Mar 23 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
JS实现拼图游戏
2021/01/29 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python实现图书借阅系统
2019/02/20 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
50道外企软件测试面试题
2014/08/18 面试题
文秘求职信范文
2014/04/10 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android