『改进』逐行滚动文字效果的Javascript实现

原创 2004年06月28日 15:02:00

/* 本程序根据21cn的一个版本改进而来。
*  原版本实现的思路是:在一个大小只有一行的层里生成一个表格,然后使用
*  TABLE的scrollTop来实现逐行滚动。但这个方法只能在IE中正常运行,在Mozzila 就无法滚动。
*  改进后使用 IFrame 来代替原来的层,使用BODY的scrollTop来实现滚动。
*  BTW:DannyKang 是我英文名写法。
*/

//FILE: scrolltext.js CREATED: DannyKang @ 2004-5-19
var stopscroll=false;
 var preTop=0;
 //var newTop=0;
 var currentTop=0;
 var stoptime=0;
 var iInterval ;

 function init_srolltext(){
 document.body.scrollTop=0;
 document.body.onmouseover   = new Function("stopscroll=true");
 document.body.onmouseout    = new Function("stopscroll=false");
 document.body.oncontextmenu = new Function("return false;");
 document.body.onselectstart = new Function("return false;");
 iInterval = setInterval("scrollUp()",25);
 }

 function scrollUp(){
  if(stopscroll==true) return;
  currentTop+=1; //每次滚动 1 个象素
  if(currentTop==24){ //刚滚动完一行后(每行高23)
   stoptime+=1;  //停顿时间累计 1 个单位时间(25毫秒)
   currentTop-=1; //滚动位移数恢复原值
   if(stoptime==100){ //停顿时间累计 100 个单位时间后重新计算滚动位移和停顿时间
    currentTop=0;
    stoptime=0;
    //if(confirm("One line end ...... /n/nok to stop , cancel to go on.")){clearInterval(iInterval);}
   }
  }else{   
   document.body.scrollTop = preTop +1; //滚动 1 个象素
   if(preTop< document.body.scrollTop){
    preTop = document.body.scrollTop ;
   }
   else {//如果滚动到末尾了(滚动跟没滚一样)
    preTop = 1
    document.body.scrollTop = 1;
    //if(confirm("scroll to all text ending.......["+preTop+"/"+document.body.scrollTop+"] /n/nok to stop , cancel to go on.")){clearInterval(iInterval);}
   }
  }
 }
 
 init_srolltext(); //启动

/*调用页面的IFrame 写法*/
<iframe id="adtxt1" align="center" style="WIDTH: 590;  HEIGHT: 23" src="index_js/adtxt1.htm" name="iframe1" frameborder="0" scrolling="no"></iframe>

/*滚动内容的HTML页面 adtxt1.htm 源代码*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>滚动新闻</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
body,TD {
 FONT-SIZE: 9pt
}
</STYLE>
<BODY scroll=no leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border=0 align="center" cellpadding=0 cellspacing=0>
  <tr>
    <td height=23 align="center" nowrap><a href="http://photo.zsnet.com/tounament/" target="_blank">中山市“美好生活一瞬间”数码摄影比赛</a>  
      <a href="http://www.zsyjedu.net.cn/jianjie.htm" target="_blank"><font color="#FF0000">中国商业技师协会职业资格权威认证培训</font></a>
    </td>
  </tr>
  <!--头条:与尾条相同内容-->
  <tr>
    <td height=23 align="center" nowrap><a href="http://wh3351.zsnet.com/news/news_view.asp?news_id=5670" target="_blank">“好山好水好儿女”中山文化名人推广月</a>  
      <a href="http://news.zsnet.com/newscontent.asp?newsid=77777" target="_blank">中山市劳动和社会保障工作情况通报</a></td>
  </tr>
  <!--tr>
    <td height=23 align="center" nowrap> </td>
  </tr-->
  <!--尾条:与头条相同内容-->
  <tr>
    <td height=23 align="center" nowrap> <a href="http://photo.zsnet.com/tounament/" target="_blank">中山市“美好生活一瞬间”数码摄影比赛</a>  
      <a href="http://www.zsyjedu.net.cn/jianjie.htm" target="_blank"><font color="#FF0000">中国商业技师协会职业资格权威认证培训</font></a>
    </td>
  </tr>
</table>
<!-- 放在body内最后一行 -->
<SCRIPT language=JavaScript src="scrolltext.js"></SCRIPT>
</BODY>
</HTML>

/*调用页面演示效果见:http://www.zhongshan.gd.cn */

Android开发之TextView文字水平滚动效果实现

在网络上搜集了很多关于这方面的文章和实现方法,
  • taomanman
  • taomanman
  • 2014年10月09日 11:31
  • 1687

JavaScript实现新闻上下滚动

原理:其实就是通过滚动条的不停滚动来实现的效果(复制即用) test
  • doudou_demo
  • doudou_demo
  • 2015年08月24日 11:15
  • 1437

JavaScript 实现图片横向自动滚动

HTML源码 XuLinJie_
  • w_linux
  • w_linux
  • 2017年04月24日 23:17
  • 2293

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016年09月22日 20:51
  • 3212

marquee 和JS 滚动效果

HTML 实现滚动效果 页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制。 使用marquee标记不仅可以移动文字,...
  • KevinwuwenboA
  • KevinwuwenboA
  • 2016年11月13日 15:43
  • 891

Javascript实现列表中列的滚动效果

经常在访问网页的时候,会发现有那种列表的滚动展示新闻或者网站消息的动态列表栏。 列表滚动效果 *{ padding:0px; margin:0px; ...
  • qq_33220449
  • qq_33220449
  • 2016年08月06日 21:33
  • 690

纯Javascript炫酷时钟、滚动文字广告--网站实用实例

需要HTML、Javascript基础的,可以看一下: http://blog.csdn.net/ljheee/article/details/51318677  http://blog.csdn.n...
  • ljheee
  • ljheee
  • 2016年06月26日 11:29
  • 1019

JavaScript实现竖直文本滚动

var stopscroll = false; var scrollContHeight = 95; //滚动区域的高度 var scrollContWidth = 230; //滚动区域的宽...
  • u011043843
  • u011043843
  • 2014年06月12日 15:22
  • 1254

原生 js 实现全屏滚动效果

原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度              2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题。 废话不多说,直接上代码 html...
  • yinkaihui
  • yinkaihui
  • 2016年04月16日 20:28
  • 6724

shell学习之逐行读取文本

有如下配置文件setDaemon.cfg,希望读取其中内容,并赋值给shell脚本中的变量 daemonFileName=/home/work/local/liumengting/shellScrip...
  • lliumt
  • lliumt
  • 2014年03月11日 14:15
  • 2128
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:『改进』逐行滚动文字效果的Javascript实现
举报原因:
原因补充:

(最多只允许输入30个字)