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


Posted in Javascript onFebruary 05, 2007

再次更新!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
                + 禁止鼠标控制暂停或继续 (将第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
        自本程序发布以来,收到不少朋友的邮件,提出了很多意见和建议,感谢大家的支持!
很不错。

不过演示代码的new Marquee("marquee",0,1,760,52,50,5000,3000)那么多参数看了让人有点迷糊,呵呵,做成这种模式可能让人看得懂一些:

function Marquee()  
{  
    this.ID = document.getElementById(arguments[0]);  
    this.Direction = arguments[1];  
    this.Step = arguments[2];  
    this.Width = arguments[3];  
    this.Height = arguments[4];  
    this.Timer = arguments[5];  
    this.WaitTime = arguments[6];  
    this.StopTime = arguments[7];  
    this.CTL = this.StartID = this.Stop = this.MouseOver = 0;  
    this.ID.style.overflowX = this.ID.style.overflowY = "hidden";  
    this.ID.noWrap = true;  
    this.ID.style.width = this.Width;  
    this.ID.style.height = this.Height;  
    this.ID.innerHTML += this.ID.innerHTML;  
}  

然后使用:

var m = new Marquee;  
m.ID = document.getElementById("marquee");  
m.Direction = 0;  
m.Step = 1;  
m.Width = 760;  
// ......  
m.Start(m, m.Timer, m.WaitTime, m.StopTime); 

m.Start的参数好像都和m有关,可以省略掉?
Javascript 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
js滚动条多种样式,推荐
Feb 05 #Javascript
如何在标题栏显示框架内页面的标题
Feb 03 #Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 #Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 #Javascript
JavaScript使用cookie
Feb 02 #Javascript
如何判断图片地址是否失效
Feb 02 #Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 #Javascript
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python绘制趋势图的示例
2020/09/17 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
好的自荐信的要求
2013/10/30 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
保险内勤岗位职责
2014/04/05 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
大学生工作自荐书
2014/06/16 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
用Python提取PDF表格的方法
2021/04/11 Python