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

取自《剑侠情缘》网站的横向连续滚动图片代码

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

  1. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    效果:http://jx.xoyo.com/zt/logo2.htm

    HTML:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>logo</title>
    </head>
    
    <body bgcolor="#F8F4F1">
    <div align="center">
    	<div id="scroll_div" style="overflow: hidden; width: 760px; height: 75px" align="center">
    	<table border="0" cellpadding="0" cellspacing="0" bgcolor="ECECEC">
          <tr> 
            <td id="scroll_begin"><a href="http://www.kingsoft.com" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c1.jpg" width="82" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://jx2.kingsoft.com" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c2.jpg" width="118" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://cq.kingsoft.com" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c3.jpg" width="101" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://fs.kingsoft.com" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c4.jpg" width="105" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://jx.kingsoft.com" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c5.jpg" width="121" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://tg.kingsoft.com/gs/" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c6.jpg" width="102" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://pay.kingsoft.com/" target="_blank"><img src="http://img.kingsoft.com/publish/jx/zt/1101/id1031_6bu_logook_r1_c7.jpg" width="72" height="75" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"><a href="http://www.shouji.cn/" target="_blank"><img src="http://img.kingsoft.com/publish/jx/images/2005/14/shouyou.jpg" border="0"></a><img src="http://img.kingsoft.com/publish/jx/zt/img/logobj.gif" width="16" height="75"></td>
    
            <td id="scroll_end"></td>
          </tr>
        </table>
    </div>
    </div>
    <script language="javascript" type="text/javascript">
    var speed = 60;
    scroll_end.innerHTML = scroll_begin.innerHTML;
    
    function Marquee() {
        if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
            scroll_div.scrollLeft -= scroll_begin.offsetWidth
        else {
            scroll_div.scrollLeft++;
        }
    }
    
    var MyMar = setInterval(Marquee, speed);
    
    scroll_div.onmouseover = function() {
        clearInterval(MyMar);
    }
    
    scroll_div.onmouseout = function() {
        MyMar = setInterval(Marquee, speed);
    }
    </script>
    
    </body>
    </html>
    调试中发现一个郁闷的问题,就是 scroll_begin 中的那些链接和图片的代码必须连着写,出现换行就会导致程序无法运行(在 EditPlus 中调试,不知道是不是因为回车换行符等影响)。
     
  2. A君

    A君 Well-Known Member

    注册:
    2005-08-31
    帖子:
    19,987
    赞:
    98
    友情连接 特效啊
     
  3. Pizza

    Pizza New Member

    注册:
    2005-09-04
    帖子:
    1,377
    赞:
    6
    这个偶有了。:)
     
  4. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    收集,以备不时之需。
     
  5. kamsang

    kamsang New Member

    注册:
    2005-10-05
    帖子:
    9,080
    赞:
    58
    收藏.....
     
  6. 小宝

    小宝 New Member

    注册:
    2006-02-19
    帖子:
    267
    赞:
    1
    不错....