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 相关文章推荐
Jquery 插件开发笔记整理
Jan 17 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Javascript设计模式之原型模式详细
Oct 05 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
js更优雅的兼容
2010/08/12 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
详解Python开发中如何使用Hook技巧
2017/11/01 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python如何安装第三方模块
2020/05/28 Python
django的autoreload机制实现
2020/06/03 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
XML文档面试题
2015/08/05 面试题
优秀教师的感人事迹
2014/02/04 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
学校督导评估方案
2014/06/10 职场文书
产品质量保证书范本
2015/02/27 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL