分享

javascript循环无缝滚动代码

 漂在北方的狼 2006-11-01

<html>
<head>
<style type="text/css">
.contents {
 font-family: "宋体", Arial;
 font-size: 12px;
 color: #333333;
 line-height: 18px;
 text-decoration: none;
}
a.contents:link {
 font-family: "宋体", Arial;
 color: #333333;
 font-size: 12px;
 line-height: 18px;
 text-decoration: none;
}
a.contents:hover {
 font-family: "宋体",Arial;
 color: #333333;
 font-size: 12px;
 line-height: 18px;
 text-decoration: underline;
}
.tbl {}
.td {overflow:hidden;}
</style>
</head>
<div align="center" id="demo" style="overflow:hidden;height:200px;width:180px;border-width:0px 0px 0px 0px;border-style:dotted dotted dotted dotted;">
<div align=center id="demo1">
<table width="90%"  class="tbl"  border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=253" class="contents">北京博采人科技开发有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=140" class="contents">北京华昌实业科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=238" class="contents">北京华星数码科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=883" class="contents">北京联盛汇源科贸有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=885" class="contents">北京盛祥世纪发展有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=147" class="contents">北京世纪佳迪办公设备销售中心</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=239" class="contents">北京世纪亚鹏科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=909" class="contents">北京索安视讯科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=872" class="contents">北京维创铭网络科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=379" class="contents">北京喜悦创业科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=440" class="contents">北京新义数码科贸有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=866" class="contents">北京禹宏工程咨询中心</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=887" class="contents">广州合意数码科技公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=809" class="contents">美誉在线国际文化传媒(北京)有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=1054" class="contents">深圳京华数码广州经营部</a></div></td>
    </tr>
</table>
</div>
    <div align="center" id="demo2"></div>
</div>
</html>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=50;    //滚动速度值,值越大速度越慢
demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
        demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
    else{
        demo.scrollTop++
    }
}
var MyMar = setInterval(Marquee,speed);        //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器
-->
</script>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多