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


Posted in Javascript onNovember 23, 2016

如下所示:

<!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 type="text/css">
  #scrollBox2{font-size:12px;width:260px;color:#646464;line-height:22px;height:66px;overflow:hidden;text-align:left;}
  </style>
  </head>
  <body>
  <div id="scrollBox2" style="text-align:left;">
  欢迎光临 
  实用的逐行文本滚动效果<br>
  滚动一行至另一行时有所停顿<br>
  希望大家喜欢,感觉挺简洁的代码<br>
  </div>
  <script>
  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;}
  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.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<=0) this.ID.scrollLeft+=this.ClientScroll; this.ID.scrollLeft-=this.Step;}
  break;
  }
  }
  </script>
  </body>
  </html>
  <br><br><hr>

以上这篇JS实用的带停顿的逐行文本循环滚动效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 #Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 #Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
You might like
php学习之 循环结构实现代码
2011/06/09 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python实现决策树
2017/12/21 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python利用tkinter实现屏保
2019/07/30 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
聘用意向书
2014/07/29 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
合同审查法律意见书
2015/06/04 职场文书