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 相关文章推荐
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
js实现下拉框二级联动
Dec 04 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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 URL验证正则表达式
2011/07/19 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
详解Django 时间与时区设置问题
2019/07/23 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
学习Python爬虫的几点建议
2020/08/05 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
大学生专科学习生活的自我评价
2013/12/07 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
人事聘任通知
2015/04/21 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书