• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

逐行滚动文字效果的Javascript实现_js

javascript 搞代码 7年前 (2018-06-13) 201次浏览 已收录 0个评论

/* 本程序根据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/&#8221; target=”_blank”>中山市“美好生活一瞬间”数码摄影比赛</a>  
      <a href=”http://www.zsyjedu.net.cn/jianjie.htm&#8221; 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&#8243; target=”_blank”>“好山好水好儿女”中山文化名人推广月</a>  
      <a href=”http://news.zsnet.com/newscontent.asp?newsid=77777&#8243; 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/&#8221; target=”_blank”>中山市“美好生活一瞬间”数码摄影比赛</a>  
      <a href=”http://www.zsyjedu.net.cn/jianjie.htm&#8221; target=”_blank”><font color=”#FF0000″>中国商业技师协会职业资格权威认证培训</font></a>
    </td>
  </tr>
</table>
<!– 放在body内最后一行 –>
<SCRIPT language=JavaScript src=”scrolltext.js”></SCRIPT>
</BODY>
</HTML>

http://www.gaodaima.com/?p=28623

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

欢迎大家阅读《逐行滚动文字效果的javascript实现_js》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:逐行滚动文字效果的Javascript实现_js

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址