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中的私有成员
Sep 18 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
微信小程序实现多图上传
Jun 19 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
vue特效之翻牌动画
Apr 20 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使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python抓取百度查询结果的方法
2015/07/08 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python_LDA实现方法详解
2017/10/25 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python用Jira库来操作Jira
2020/12/28 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
售房委托书
2014/08/30 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL