不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了


Posted in Javascript onDecember 08, 2007

/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 

 制作时间:2006-08-29 (Ver 0.5) 
 发布时间:2006-08-31 (Ver 0.8) 
 更新时间:2007-01-31 (Ver 1.6) 
 更新说明: + 加入功能 * 修正、完善 
    1.6.070131 
        + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1) 
        + 判断是否可以滚动 (若内容区域小于显示区域,则自动取消滚动) 
        + 跳过初始化错误 (避免引起其它滚动的停止) 
        + 默认值 (除容器ID必选外,其他参数均可根据情况进行选择设置) 
        + 参数动态赋值 (方向可用英文表示top|bottom|left|right,使其更直观、方便) 
        * 文字滚动不准确 (本次更新主要目的解决此Bug,感谢周?参与测试) 
    1.4.061211 
        + 鼠标悬停改变滚动方向 (鼠标悬停控制左右滚动) 
        * 由于文档下载过慢而导致获取的高度/宽度不准确 
        * 浏览器兼容问题 (IE、FF、Opera、NS、MYIE) 
    1.2.060922 
        + 指定范围间歇滚动 
        * 程序调整 
        * 连续间歇滚动停止的错误 
    1.0.060901 
        + 向下、向右滚动 
        + 开始等待时间 
        + 连续滚动 
        * 调整时间单位 
        * 滚动误差 
        * 随机死循环 
        * 加强性能 
        * 程序优化 
    0.8.060829 
          翻屏不间断向上、向左滚动 

 演示地址:http://www.popub.net/script/MSClass.html 
 下载地址:http://www.popub.net/script/MSClass.js 

 应用说明:页面包含<script type="text/javascript" src="MSClass.js"></script> 

    创建实例: 
        //参数直接赋值法 
        new Marquee("marquee") 
        new Marquee("marquee","top") 
        ...... 
        new Marquee("marquee",0,1,760,52) 
        new Marquee("marquee","top",1,760,52,50,5000) 
        ...... 
        new Marquee("marquee",0,1,760,104,50,5000,3000,52) 
        new Marquee("marquee",null,null,760,104,null,5000,null,-1) 

        //参数动态赋值法 
        var marquee1 = new Marquee("marquee")    *此参数必选 
        marquee1.Direction = "top";    或者    marquee1.Direction = 0; 
        marquee1.Step = 1; 
        marquee1.Width = 760; 
        marquee1.Height = 52; 
        marquee1.Timer = 50; 
        marquee1.DelayTime = 5000; 
        marquee1.WaitTime = 3000; 
        marquee1.ScrollStep = 52; 
        marquee1.Start(); 

    参数说明: 
        ID        "marquee"    容器ID        (必选) 
        Direction    (0)        滚动方向    (可选,默认为0向上滚动) 可设置的值包括:0,1,2,3,"top","bottom","left","right" (0向上 1向下 2向左 3向右) 
        Step        (1)        滚动的步长    (可选,默认值为2,数值越大,滚动越快) 
        Width        (760)        容器可视宽度    (可选,默认值为容器初始设置的宽度) 
        Height        (52)        容器可视高度    (可选,默认值为容器初始设置的高度) 
        Timer        (50)        定时器        (可选,默认值为30,数值越小,滚动的速度越快,1000=1秒,建议不小于20) 
        DelayTime    (5000)        间歇停顿延迟时间(可选,默认为0不停顿,1000=1秒) 
        WaitTime    (3000)        开始时的等待时间(可选,默认或0为不等待,1000=1秒) 
        ScrollStep    (52)        间歇滚动间距    (可选,默认为翻屏宽/高度,该数值与延迟均为0则为鼠标悬停控制,-1禁止鼠标控制) 
 使用建议: 
        1、建议直接赋予容器的显示区域的宽度和高度,如(<div id="marquee" style="width:760px;height:52px;">......</div>) 
        2、建议为容器添加样式overflow = auto,如(<div id="marquee" style="width:760px;height:52px;overflow:auto;">......</div>) 
        3、为了更准确的获取滚动区域的宽度和高度,请尽可能将各滚动单位直接赋予正确宽高度 
        4、对于TABLE标记的横向滚动,需要对TABLE添加样式display = inline,如(<div id="marquee" style="width:760px;height:52px;overflow:auto;"><table style="display:inline">......</table></div>) 
        5、对于翻屏滚动或间歇滚动,要注意各滚动单位间的间距,同时需要对容器的可视高度和可视宽度做好准确的设置,对于各滚动单位间的间距可以通过设置行间距或者单元格的高宽度来进行调整 
        6、对于LI自动换行的问题暂时没有更好的解决办法,建议将其转换成表格(TABLE)的形式来达到同等的效果 
        7、针对横向滚动的文字段落,如果最末端是以空格" "结束的,请将空格" "转换成" " 
        8、鼠标悬停滚动思想源自Flash,所以有一定的局限性(容器内仅允许用图片<img>或者带链接的图片<a><img></a>的形式,并需要禁止其自动换行) 

 感

谢: 
    周? zhoujun#yuchengtech.com (文字滚动跳行的bug) 2007/01/31 
    自本程序发布以来,收到不少朋友的邮件,提出了很多意见和建议,感谢大家的支持! 

\***程序制作/版权所有:崔永祥(333) E-Mail:zhadan007@21cn.com 网址:http://www.popub.net***/ 

<!-- 
function Marquee() 
{ 
    this.ID = document.getElementById(arguments[0]); 
    if(!this.ID) 
    { 
        alert("您要设置的\"" + arguments[0] + "\"初始化错误\r\n请检查标签ID设置是否正确!"); 
        this.ID = -1; 
        return; 
    } 
    this.Direction = this.Width = this.Height = this.DelayTime = this.WaitTime = this.Correct = this.CTL = this.StartID = this.Stop = this.MouseOver = 0; 
    this.Step = 1; 
    this.Timer = 30; 
    this.DirectionArray = {"top":0 , "bottom":1 , "left":2 , "right":3}; 
    if(typeof arguments[1] == "number")this.Direction = arguments[1]; 
    if(typeof arguments[2] == "number")this.Step = arguments[2]; 
    if(typeof arguments[3] == "number")this.Width = arguments[3]; 
    if(typeof arguments[4] == "number")this.Height = arguments[4]; 
    if(typeof arguments[5] == "number")this.Timer = arguments[5]; 
    if(typeof arguments[6] == "number")this.DelayTime = arguments[6]; 
    if(typeof arguments[7] == "number")this.WaitTime = arguments[7]; 
    if(typeof arguments[8] == "number")this.ScrollStep = arguments[8] 
    this.ID.style.overflow = this.ID.style.overflowX = this.ID.style.overflowY = "hidden"; 
    this.ID.noWrap = true; 
    this.IsNotOpera = (navigator.userAgent.toLowerCase().indexOf("opera") == -1); 
    if(arguments.length >= 7)this.Start(); 
} 
Marquee.prototype.Start = function() 
{ 
    if(this.ID == -1)return; 
    if(this.WaitTime < 800)this.WaitTime = 800; 
    if(this.Timer < 20)this.Timer = 20; 
    if(this.Width == 0)this.Width = parseInt(this.ID.style.width); 
    if(this.Height == 0)this.Height = parseInt(this.ID.style.height); 
    if(typeof this.Direction == "string")this.Direction = this.DirectionArray[this.Direction.toString().toLowerCase()]; 
    this.HalfWidth = Math.round(this.Width / 2); 
    this.BakStep = this.Step; 
    this.ID.style.width = this.Width; 
    this.ID.style.height = this.Height; 
    if(typeof this.ScrollStep != "number")this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; 
    //this.ID.innerHTML += this.ID.innerHTML; 
    var msobj = this; 
    var timer = this.Timer; 
    var delaytime = this.DelayTime; 
    var waittime = this.WaitTime; 
    msobj.StartID = function(){msobj.Scroll()} 
    msobj.Continue = function() 
                { 
                    if(msobj.MouseOver == 1) 
                    { 
                        setTimeout(msobj.Continue,delaytime); 
                    } 
                    else 
                    {    clearInterval(msobj.TimerID); 
                        msobj.CTL = msobj.Stop = 0; 
                        msobj.TimerID = setInterval(msobj.StartID,timer); 
                    } 
                } 
    msobj.Pause = function() 
            { 
                msobj.Stop = 1; 
                clearInterval(msobj.TimerID); 
                setTimeout(msobj.Continue,delaytime); 
            } 
    msobj.Begin = function() 
        { 
            msobj.ClientScroll = msobj.Direction > 1 ? msobj.ID.scrollWidth : msobj.ID.scrollHeight; 
            if((msobj.Direction <= 1 && msobj.ClientScroll <msobj.Height) || (msobj.Direction > 1 && msobj.ClientScroll <msobj.Width))return; 
            msobj.ID.innerHTML += msobj.ID.innerHTML; 
            msobj.TimerID = setInterval(msobj.StartID,timer); 
            if(msobj.ScrollStep < 0)return; 
            msobj.ID.onmousemove = function(event) 
                        { 
                            if(msobj.ScrollStep == 0 && msobj.Direction > 1) 
                            { 
                                var event = event || window.event; 
                                if(window.event) 
                                { 
                                    if(msobj.IsNotOpera) 
                                    { 
                                        msobj.EventLeft = event.srcElement.id == msobj.ID.id ? event.offsetX - msobj.ID.scrollLeft : event.srcElement.offsetLeft - msobj.ID.scrollLeft + event.offsetX; 
                                    } 
                                    else 
                                    { 
                                        msobj.ScrollStep = null; 
                                        return; 
                                    } 
                                } 
                                else 
                                { 
                                    msobj.EventLeft = event.layerX - msobj.ID.scrollLeft; 
                                } 
                                msobj.Direction = msobj.EventLeft > msobj.HalfWidth ? 3 : 2; 
                                msobj.AbsCenter = Math.abs(msobj.HalfWidth - msobj.EventLeft); 
                                msobj.Step = Math.round(msobj.AbsCenter * (msobj.BakStep*2) / msobj.HalfWidth); 
                            } 
                        } 
            msobj.ID.onmouseover = function() 
                        { 
                            if(msobj.ScrollStep == 0)return; 
                            msobj.MouseOver = 1; 
                            clearInterval(msobj.TimerID); 
                        } 
            msobj.ID.onmouseout = function() 
                        { 
                            if(msobj.ScrollStep == 0) 
                            { 
                                if(msobj.Step == 0)msobj.Step = 1; 
                                return; 
                            } 
                            msobj.MouseOver = 0; 
                            if(msobj.Stop == 0) 
                            { 
                                clearInterval(msobj.TimerID); 
                                msobj.TimerID = setInterval(msobj.StartID,timer); 
                            } 
                        } 
        } 
    setTimeout(msobj.Begin,waittime); 
} 
Marquee.prototype.Scroll = function() 
{ 
    switch(this.Direction) 
    { 
        case 0: 
            this.CTL += this.Step; 
            if(this.CTL >= this.ScrollStep && this.DelayTime > 0) 
            { 
                this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL; 
                this.Pause(); 
                return; 
            } 
            else 
            { 
                if(this.ID.scrollTop >= this.ClientScroll) 
                { 
                    this.ID.scrollTop -= this.ClientScroll; 
                } 
                this.ID.scrollTop += this.Step; 
            } 
        break; 
        case 1: 
            this.CTL += this.Step; 
            if(this.CTL >= this.ScrollStep && this.DelayTime > 0) 
            { 
                this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; 
                this.Pause(); 
                return; 
            } 
            else 
            { 
                if(this.ID.scrollTop <= 0) 
                { 
                    this.ID.scrollTop += this.ClientScroll; 
                } 
                this.ID.scrollTop -= this.Step; 
            } 
        break; 
        case 2: 
            this.CTL += this.Step; 
            if(this.CTL >= this.ScrollStep && this.DelayTime > 0) 
            { 
                this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; 
                this.Pause(); 
                return; 
            } 
            else 
            { 
                if(this.ID.scrollLeft >= this.ClientScroll) 
                { 
                    this.ID.scrollLeft -= this.ClientScroll; 
                } 
                this.ID.scrollLeft += this.Step; 
            } 
        break; 
        case 3: 
            this.CTL += this.Step; 
            if(this.CTL >= this.ScrollStep && this.DelayTime > 0) 
            { 
                this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; 
                this.Pause(); 
                return; 
            } 
            else 
            { 
                if(this.ID.scrollLeft <= 0) 
                { 
                    this.ID.scrollLeft += this.ClientScroll; 
                } 
                this.ID.scrollLeft -= this.Step; 
            } 
        break; 
    } 
} 
//-->

在线演示
Javascript 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
this和执行上下文实现代码
Jul 01 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
项目实践之javascript技巧
Dec 06 #Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 #Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 #Javascript
javascript 常用关键字列表集合
Dec 04 #Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 #Javascript
超棒的javascript页面顶部卷动广告效果
Dec 01 #Javascript
js同时按下两个方向键
Dec 01 #Javascript
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
jQuery事件详解
2017/02/23 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
解析python的局部变量和全局变量
2019/08/15 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
青春演讲稿范文
2014/05/08 职场文书
人事专员岗位职责
2015/02/03 职场文书