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

javascript|滚动文字

/* 本程序根据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 */

时间: 2024-11-18 15:34:15

逐行滚动文字效果的Javascript实现的相关文章

使用Dreamweaver插件制作滚动文字效果

插件名称:Marquee功能:制作滚动文字.大家一定对Frontpage中的大屏幕文字记忆犹新吧,嘿嘿有了这个插件Dreamweavr也-- 操作范例:1.在对象面板中选择 按钮.2.系统弹出对话框.选择相应的参数即可. Text:滚动效果的文字. Font:文字的效果Size:字体大小 Font Color 文字颜色 BG Color背景颜色. Direction 运动方向 Left朝左 Right朝右 Speed 运动速度.Delay 延迟 Amount移动速度 Behavior运动方式 S

javascript中向左滚动文字效果

C# 鼠标属性动态操作相关源码示例,比如.隐藏与显示鼠标指针.将鼠标左右键功能互换.更换鼠标指针形状.调用Windows鼠标设置面板等,小技巧,多多益善.

向左滚动文字 js代码效果_javascript技巧

复制代码 代码如下: <html><head><title>滚动文字效果</title><style type="text/css">#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:

JavaScript实现彩虹文字效果的方法_javascript技巧

本文实例讲述了JavaScript实现彩虹文字效果的方法.分享给大家供大家参考.具体如下: <HTML> <HEAD> <TITLE>Rainbow Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin hide from old browsers function createHexArray(n) { this.length = n; for (var i =

JS实现霓虹灯文字效果的方法_javascript技巧

本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html

JS实现倒计时和文字滚动的效果实例

 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现 前台部分的完整代码如下: 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serve

JS实现倒计时和文字滚动的效果实例_javascript技巧

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现 前台部分的完整代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.o

Js实现滚动变色的文字效果_javascript技巧

Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 以下是源代码: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滚动变色的文字js特效</title>

JavaScript状态栏显示滚动文字

<html>  <head> <script language="JavaScript"> <!-- hide var scrtxt = "状态栏文字滚动特效." +"这是由JS脚本生成的特效." +"用到了字符串处理和延时函数."; // 定义要滚动的字符串. var length = scrtxt.length; // 获取滚动显示的字符串的长度.  var width = 100