1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

取自《剑侠情缘》网站的滚动字幕效果

本帖由 不学无术2006-04-18 发布。版面名称:前端开发

  1. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    效果:http://db.kingsoft.com/publish/ssi/2005/08/24/o929.shtml

    HTML:
    <html>
    <head>
    <title>热点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    body {
        border: 0;
    	background-color: #ffffff;
    	margin-left: 0;
    	margin-top: 0;
    	margin-right: 0;
    	margin-bottom: 0;
    }
    table {
        font-size: 12px;
    	color: #000000;
    	font-family: "宋体";
    }
    a {
        text-decoration: underline;
    	color: #005bc6;
    }
    a:hover {
        text-decoration: underline;
    	color: #FF0000;
    }
    /* 最近更新文字 */
    a.new:link, a.new:visited {
        text-decoration: underline;
        color: #FF0000;
    }
    a.new:hover {
        text-decoration: underline;
        color:#FF0000;
    }
    -->
    </style>
    </head>
    
    <body bgcolor="#FFFFFF">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="369"> <div id="table01" style="width: 369px;" bgcolor="#FFFFFF"> 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr> 
                      <td height="19" bgcolor="#FFFFFF"  style="padding:0 0 0 5"><a href="http://db.kingsoft.com/news/seleak/2006/04/11/80581.shtml" target="_blank" class="new">微软发布四月安全公告 修补五项重大安全漏洞</a> </td>
                    </tr>
                    <tr>
                      <td height="19" bgcolor="#FFFFFF" style="padding:0 0 0 5" ><a href="http://db.kingsoft.com/news/report/2006/04/11/80612.shtml" target="_blank" class="new">《金山毒霸》与美国大片《防火墙》合作推广</a></td>
                    </tr>
                    <tr> 
                      <td height="19" bgcolor="#FFFFFF" style="padding:0 0 0 5" ><a href="http://js.kingsoft.com/" target="_blank" class="new">金山网游加速器 
                        快人一步 胜人一筹</a></td>
                    </tr>
                    <tr>
                      <td height="19" bgcolor="#FFFFFF" style="padding:0 0 0 5" ><a href="http://ask.xoyo.com/db/guide.shtml" target="_blank" class="new">逍遥问安全栏目上线 
                        十五类安全问答为您解忧</a></td>
                    </tr>
                    <tr>
                      <td height="19" bgcolor="#FFFFFF" style="padding:0 0 0 5" ><a href="http://61.136.58.111/ad/click.php?pid=514&url=dd.iciba.com" target="_blank" class="new">词霸豆豆——轻巧免费的查词翻译工具</a> 
                        <a href="http://61.136.58.111/ad/click.php?pid=514&url=dd.iciba.com/down.shtml" target="_blank" class="new">立即下载体验</a></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
          </div></td>
      </tr>
    </table>
    <script language="javascript" type="text/javascript">	
    /* 定义常量(可根据实际情况做调整) */
    marqueetable = document.all.table01;
    scrollheight = 19;    //滚动高度
    scrollline = 1;    //滚动内容的行数 
    scrolltimeout = 10;    //滚动刷新的时间(毫秒)
    //    滚动停留时检测的次数,
    //    scrollstoptimes * scrolltimeout 为实际的停留时间 
    scrollstoptimes = 200;
    
    /* 初始化滚动设置(无需修改) */
    marqueetable.scrollTop = 0; 	
    stopscroll1 = false; 	
    startmarqueetop = 0;
    offsettop = scrollheight;
    marqueestoptime = 0;
    marqueetable.innerHTML += marqueetable.innerHTML; 
    
    with (marqueetable) {
        style.width = 500;
        style.height = scrollheight;
        style.overflowX = "hidden";
        style.overflowY = "hidden";
        noWrap = true;
        onmouseover = new Function("stopscroll1 = true");
        onmouseout = new Function("stopscroll1 = false");
    }
    
    function setmarqueetime() {
        marqueetable.scrollTop = 0;
        setInterval("marqueeup()", scrolltimeout);    //设置滚动的时间
    }
    
    function marqueeup() { 	
        if (stopscroll1 == true) return; 	 
        offsettop += 1; 	
    	if (offsettop == scrollheight + 1) { 
            marqueestoptime += 1; 		
    		offsettop -= 1; 		
    		if (marqueestoptime == scrollstoptimes) {    //停留的时间
                offsettop = 0; 
    			marqueestoptime = 0;
    		}
    	}
    	else {
    		startmarqueetop = marqueetable.scrollTop; 		
    		marqueetable.scrollTop += 1; 	
    		if (startmarqueetop == marqueetable.scrollTop) { 
    			marqueetable.scrollTop = scrollheight * (scrollline - 1); 
    			marqueetable.scrollTop += 1; 
    		} 
    	 } 
    } 
    setmarqueetime(); 	
    </script>
    </body>
    </html>
     
    #1 不学无术, 2006-04-18
    最后编辑: 2006-04-18
  2. A君

    A君 Well-Known Member

    注册:
    2005-08-31
    帖子:
    19,987
    赞:
    98
    这个特效不错。
     
  3. Pizza

    Pizza New Member

    注册:
    2005-09-04
    帖子:
    1,377
    赞:
    6
  4. amt

    amt New Member

    注册:
    2005-12-13
    帖子:
    8,582
    赞:
    67
    确实~
     
  5. 老林

    老林 New Member

    注册:
    2005-09-06
    帖子:
    10,580
    赞:
    36
  6. kamsang

    kamsang New Member

    注册:
    2005-10-05
    帖子:
    9,080
    赞:
    58
    不错. 不错. 上次要找得就是这个... 还可以扩展...
     
  7. 小宝

    小宝 New Member

    注册:
    2006-02-19
    帖子:
    267
    赞:
    1
    怎么扩展?

    加行?
     
  8. 空心菜

    空心菜 New Member

    注册:
    2005-10-05
    帖子:
    85
    赞:
    0
    这个好
     
  9. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    增加表格行即可。
     
  10. 流氓兔

    流氓兔 New Member

    注册:
    2005-09-27
    帖子:
    905
    赞:
    3
    :eek: 收藏。。。。

    厉害的家伙
     
  11. redfox

    redfox New Member

    注册:
    2006-03-30
    帖子:
    106
    赞:
    0
    我复制下来,没有换行呢????
     
  12. 流氓兔

    流氓兔 New Member

    注册:
    2005-09-27
    帖子:
    905
    赞:
    3
    :eek: 是不是IE限制了