Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页

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

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

 应用说明:页面包含<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>的形式,并需要禁止其自动换行)

 感  谢:
    天上的书生(QQ:30370740) (IE页面留白的Bug) 2007/12/22
    周珺 zhoujun#yuchengtech.com (文字滚动跳行的bug) 2007/01/31
    自本程序发布以来,收到不少朋友的邮件,提出了很多意见和建议,感谢大家的支持!

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

  • js实现的类marquee水平循环滚动

    复制代码 代码如下: <script> var speed=20;/*速度数值越大速度越慢*/ document.getElementById('www_qpsh_com2').innerHTML=document.getElementById('www_qpsh_com1').innerHTML; /*两个层来回交替出现*/ function Marquee(){ if(document.getElementById('www_qpsh_com2').offsetWidth-document

  • javascript 模拟Marquee文字向左均匀滚动代码

    可以实现匀速.无缝.加链接以及其它的修饰效果,本代码就是实现了这一功能,让文字从右至右平滑滚动,滚动宽度.高度.速度均可以设定. Js文字向左运动 var marqueewidth=350 var marqueeheight=22 var speed=5 var marqueecontents='欢迎光临我们 网页特效栏目,精品特效全收罗!' if (document.all) document.write(''+marqueecontents+'') function regenerate()

  • JS实现无缝循环marquee滚动效果

    无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!-- 横向一定要是span --> <div id=&

  • 用javascript代替marquee的滚动字幕效果代码

    由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marquee标签的朋友,不妨先阅读一下这篇文章.第一种方法:用javascript模拟marquee的做法.出处:网易游戏 热点新闻 滚动新闻 var marqueeContent=new Array(); marqueeContent[0]="用"梦幻密保"快速取回帐号密码"; marqueeContent[1]="网易将军令

  • JS与HTML结合使用marquee标签实现无缝滚动效果代码

    最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动.下面小编把实现代码分享到我们平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步. 具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns=&

  • JQuery插件Marquee.js实现无缝滚动效果

    Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次

  • div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

    div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo

  • 用javascript实现代替marquee的滚动字幕效果代码

    由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西,你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间,但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天?就以经典论坛页面上部"BlogBeta 数字引擎p4 3.0服务器只要6999元/年"广告文字右边的聚合文字滚动为例,你觉得这是一个很好的用户体验么?W3C的专家们难道还不如一群无知

  • 再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6) /*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                +

随机推荐