javascript 三组文字间隙滚动实例代码

三组文字间隙滚动

*{font-size:12px;}
#scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;}

国家 汇率名称 今日汇率

美元USD ŀ.775%

港币HKD ŀ.75%

英镑GBP ŀ.50%

欧元EUR ŀ.25%

日元JPY ŀ.01%

window.onload=function(){
new Marquee(
"scrollBox2", //容器ID

0, //向上滚动(0向上 1向下 2向左 3向右)

2, //滚动的步长

200, //容器可视宽度

64, //容器可视高度

50, //定时器 数值越小,滚动的速度越快(1000=1秒,建议不小于20)

2000, //间歇停顿时间(0为不停顿,1000=1秒)

1000, //开始时的等待时间(0为不等待,1000=1秒)

22 //间歇滚动间距(可选)

);
};
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];
if(arguments[8]){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;}
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.ClientScroll=this.Direction>1?this.ID.scrollWidth:this.ID.scrollHeight;
this.ID.innerHTML+=this.ID.innerHTML;
this.Start(this,this.Timer,this.WaitTime,this.StopTime);
}
Marquee.prototype.Start=function(msobj,timer,waittime,stoptime){
msobj.StartID=function(){msobj.Scroll();}
msobj.Continue=function(){
if(msobj.MouseOver==1){setTimeout(msobj.Continue,waittime);}
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,waittime);}
msobj.Begin=function(){
msobj.TimerID=setInterval(msobj.StartID,timer);
msobj.ID.onmouseover=function(){msobj.MouseOver=1; clearInterval(msobj.TimerID);}
msobj.ID.onmouseout=function(){msobj.MouseOver=0; if(msobj.Stop==0){clearInterval(msobj.TimerID); msobj.TimerID=setInterval(msobj.StartID,timer);}}
}
setTimeout(msobj.Begin,stoptime);
}
Marquee.prototype.Scroll=function(){
switch(this.Direction){
case 0:
this.CTL+=this.Step;
if(this.CTL>=this.ScrollStep&&this.WaitTime>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.WaitTime>0){this.ID.scrollTop-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}
else{if(this.ID.scrollTop=this.ScrollStep&&this.WaitTime>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.WaitTime>0){this.ID.scrollLeft-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;}
else{if(this.ID.scrollLeft

 

 

 

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • javascript 三组文字间隙滚动实例代码

    三组文字间隙滚动 *{font-size:12px;} #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 国家 汇率名称 今日汇率 美元USD ŀ.775% 港币HKD ŀ.75% 英镑GBP ŀ.50% 欧元EUR ŀ.25% 日元JPY ŀ.01% window.onload=function(){ new Marquee( "scrollBox2&

  • javascript单张多张图无缝滚动实例代码

    我们会看到很多的网站上会使用多张图片无缝滚动的效果. 下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动. 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{po

  • JS实现的新浪微博大厅文字内容滚动效果代码

    本文实例讲述了JS实现的新浪微博大厅文字内容滚动效果代码.分享给大家供大家参考,具体如下: 新浪微博大厅滚动tweets-slide,JavaScript实现,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过今天发现这款竟然还要好,不敢独享,希望需要的朋友喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-txt-scroll-tweets-slide-codes/ 具体代码如下: <!doctype html>

  • JavaScript实现垂直向上无缝滚动特效代码

    一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • JavaScript实现标题栏文字轮播效果代码

    本文实例讲述了JavaScript实现标题栏文字轮播效果代码.分享给大家供大家参考,具体如下: 这里演示的JS文字轮播,显示在标题栏区域,以前个人主页时候经常见到的效果,不过现在都规范了,标题栏一般都不加入这种效果了.但是可以学习一下JS制作实现一些文字特效,运行效果后请查看标题栏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-title-loop-show-style-demo/ 具体代码如下: <html> <head>

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • JavaScript比较同一天的时间大小实例代码

    在项目开发的过程中,有时候会遇到同一天内的时间大小比较,一般来说选择时间是通过插件实现的,但并不排除客户要求手动输入的情况. 那么,在应客户要求手动输入时间,并且需要进行时间大小比较的时候该如何实现呢?以下简单介绍我实现的方法步骤: 1.首先,获取用户输入的内容: 2.验证时间格式是否正确: 3.比较两个时间的大小(整理了三种比较时间的方法,详情请查看以下代码): 4.返回结果. 以下为示例代码,仅做参考: 1.获取用户输入的两个时间,并将用户输入的冒号全部替换为半角冒号,方便后续操作: var

  • JavaScript实现H5接金币功能(实例代码)

    今日做出做出一个春节接金币红包的活动,感觉挺不错的分享给大家 这个小游戏采用hilojs实现的,详情 第一步:安装插件 npm i hilojs或者yarn add hilojs 第二步:创建一个Asset.js文件 import Hilo from "hilojs"; export default Hilo.Class.create({ Mixes: Hilo.EventMixin, queue: null, // 下载类 gold: null, // 金币 wood: null,

  • Javascript简单实现面向对象编程继承实例代码

    本文讲述了Javascript简单实现面向对象编程继承实例代码.分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) 2.聚合能力(即允许类里面再包含类,这样可以应付足够复杂的设计) 3.支持继承(父类可以派生出子类,子类拥有父母的属性或方法) 4.支持多态(允许同样的方法名,根据方法签名[即函数的参数]不同,有各自独立的处理方法) 这四个基本属性,javascript都可以支持,所以javasc

随机推荐