JS实用的带停顿的逐行文本循环滚动效果实例资源-CSDN文库

191 浏览量 2020-11-28 19:32:18 上传评论收藏 36KB PDF 举报

如下所示： <!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>JS实用的带停顿的逐行文本循环滚动效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style 在JavaScript（JS）中，创建一个实用的带停顿的逐行文本循环滚动效果涉及到多个技术要点，包括HTML布局、CSS样式以及JavaScript的DOM操作和定时器。以下是对这个实例的详细解释： HTML部分定义了一个`<div>`元素，它的`id`是`scrollBox2`，用于存放要滚动的文本。`<head>`部分包含一个`<title>`标签，定义了页面的标题，以及一个`<meta>`标签，设置了字符编码为GBK。CSS样式被用来设定`scrollBox2`的字体大小、宽度、颜色、行高、溢出隐藏、文本对齐方式以及可视区域的高度。接下来，JavaScript部分的核心是一个名为`Marquee`的自定义函数，它用于实现滚动效果。这个函数接受多个参数，包括容器ID、滚动方向、滚动步长、容器可视宽度、可视高度、定时器速度、停顿时间和开始等待时间。当页面加载完成后，`window.onload`事件触发，创建一个新的`Marquee`实例并传入相应的参数。 `Marquee`函数内部首先通过`document.getElementById`获取到指定ID的元素，然后根据传入的参数设置滚动方向、步长等属性。接着，通过调整元素的`scrollWidth`和`scrollHeight`来实现滚动效果。将元素的HTML内容复制一份，使得文本可以从结束处滚动回起点，形成循环效果。 `Marquee.prototype`包含了多个方法，如`Start`、`Continue`、`Pause`，这些方法用于控制滚动的开始、继续和暂停。`Start`方法启动滚动过程，`Continue`方法在鼠标离开时恢复滚动，`Pause`方法则在鼠标悬停时暂停滚动。定时器(`setInterval`)被用来周期性地调用`Scroll`方法，实现文本的滚动。滚动的实现主要依赖于`Scroll`方法，它会根据滚动方向和步长更新元素的`scrollTop`或`scrollLeft`属性，从而达到文本滚动的效果。同时，`MouseOver`变量被用来检测是否鼠标悬停在元素上，以便决定是否暂停滚动。总结来说，这个实例通过JavaScript实现了一个带停顿的逐行文本循环滚动效果，利用了DOM操作、定时器和条件判断，提供了用户交互功能，如鼠标悬停暂停和离开后继续滚动。通过调整不同的参数，可以定制滚动速度、停顿时间和等待时间，以满足不同场景的需求。这个效果通常应用于新闻滚动条、公告栏等需要展示大量文本但空间有限的网页设计中。

资源详情

资源评论

资源推荐

JS实用的带停顿的逐行文本循环滚动效果实例实用的带停顿的逐行文本循环滚动效果实例

如下所示：如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JS实用的带停顿的逐行文本循环滚动效果</title>

#scrollBox2{font-size:12px;width:260px;color:#646464;line-height:22px;height:66px;overflow:hidden;text-align:left;}

</style>

</head>

<body>

欢迎光临

实用的逐行文本滚动效果<br>

滚动一行至另一行时有所停顿<br>

希望大家喜欢，感觉挺简洁的代码<br>

</div>

window.onload=function(){

new Marquee(

"scrollBox2", //容器ID<br>

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

2, //滚动的步长<br>

200, //容器可视宽度<br>

64, //容器可视高度<br>

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

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

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

//间歇滚动间距(可选)<br>

);

};

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;}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈

weixin_38654855

粉丝: 6
资源: 888

JS实用的带停顿的逐行文本循环滚动效果实例

评论0

最新资源

JS实用的带停顿的逐行文本循环滚动效果实例

评论0

JS实现的文字间歇循环滚动效果完整示例

JS 实现可停顿的垂直滚动实例代码

js文字滚动停顿效果代码

JQUery实现上下循环滚动效果

js实现简单选项卡与自动切换效果的方法

js文章循环滚动，鼠标上移停止

文字的一行一行滚动显示

多列文字循环滚动带停顿--萧萱芸梦提供

JS实现自动切换文字的导航效果代码

js 文本滚动效果的实例代码

使用jquery实现的循环连续可停顿滚动实例

js实现单行文字滚动

文字滚动的插件和实例

JavaScript 无缝上下滚动加定高停顿效果

jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐

Qt字幕从右到左循环滚动

用CSS3实现无限循环的无缝滚动的实例代码

java 逐行读取文本内容

原生js实现表格循环滚动

用JavaScript和ASP制作连续滚动的字幕

html图片无缝循环滚动

H5实现中奖记录逐行滚动切换效果

js 上下文字滚动效果

浅析js 文字滚动效果

文字循环滚动插件

js实现数字滚动特效

JS实现简单的文字无缝上下滚动功能示例

最新资源