溜溜show-简单实现无间断循环滚动效果

简单实现无间断循环滚动效果

huang 发表时间:2009-02-10 14:01:52 分类:WEB标准浏览( ) 评论( ) 收藏日志

添加到网摘：

简单实现无间断文字图片等循环滚动效果

HTML代码:

引用内容

<HTML><HEAD><TITLE>无间断滚动原理</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<div id="tbmq">
  <table width="300" border="1" align="left" bgcolor="#00CCFF">
    <tr>
      <td height="30"> </td>
      <td>溜溜show 1</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>溜溜show 2</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>溜溜show 3</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>溜溜show 4</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>溜溜show 5</td>
      <td> </td>
    </tr>
  </table>
</div>
<script>
function MqObj(obj,width,height,speed,direct){
obj.contWidth=obj.offsetWidth;// offsetWidth
obj.stopscroll=false;
obj.nowscroll=0;
with(obj){
scrollLeft=0;//
innerHTML+=innerHTML;
style.width=width;
style.height=height;
style.overflowX="hidden";//
style.overflowY="visible";//
noWrap=true;
onmouseover=function(){stopscroll=true};
onmouseout=function(){stopscroll=false};
}
eval("setInterval('doScroll("+obj.id+")',"+speed+")");
}
function doScroll(obj){
if(obj.stopscroll==true) return;
if(obj.nowscroll<obj.contWidth){ //
obj.scrollLeft=obj.nowscroll++;//scrollLeft
}else{
obj.scrollLeft=0;//scrollLeft
obj.nowscroll=0;
}
}
window.onload=function(){
MqObj(tbmq,"250","200","10")
MqObj(tbmq2,"270","200","50")
}
</script>
<div id="tbmq2">
  <table width="300" border="1" align="left" bgcolor="#00CCFF">
    <tr>
      <td height="30"> </td>
      <td>Q966.com 1</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>Q966.com 2</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>Q966.com 3</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>Q966.com 4</td>
      <td> </td>
    </tr>
    <tr>
      <td height="30"> </td>
      <td>Q966.com 5</td>
      <td> </td>
    </tr>
  </table>
</div>
</BODY></HTML>

运行查看效果:

HTML代码

<HTML><HEAD><TITLE>无间断滚动原理</TITLE> \n
<META http-equiv=Content-Type content="text/html; charset=gb2312"> \n
</HEAD> \n
<BODY> \n
<div id="tbmq"> \n
  <table width="300" border="1" align="left" bgcolor="#00CCFF"> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>溜溜show 1</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>溜溜show 2</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>溜溜show 3</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>溜溜show 4</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>溜溜show 5</td> \n
      <td> </td> \n
    </tr> \n
  </table> \n
</div> \n
<script> \n
function MqObj(obj,width,height,speed,direct){ \n
obj.contWidth=obj.offsetWidth;// offsetWidth \n
obj.stopscroll=false; \n
obj.nowscroll=0; \n
with(obj){ \n
scrollLeft=0;// \n
innerHTML+=innerHTML; \n
style.width=width; \n
style.height=height; \n
style.overflowX="hidden";// \n
style.overflowY="visible";// \n
noWrap=true; \n
onmouseover=function(){stopscroll=true}; \n
onmouseout=function(){stopscroll=false}; \n
} \n
eval("setInterval('doScroll("+obj.id+")',"+speed+")"); \n
} \n
function doScroll(obj){ \n
if(obj.stopscroll==true) return; \n
if(obj.nowscroll<obj.contWidth){ //  \n
obj.scrollLeft=obj.nowscroll++;//scrollLeft \n
}else{ \n
obj.scrollLeft=0;//scrollLeft \n
obj.nowscroll=0; \n
} \n
} \n
window.onload=function(){ \n
MqObj(tbmq,"250","200","10") \n
MqObj(tbmq2,"270","200","50") \n
} \n
</script> \n
<div id="tbmq2">  \n
  <table width="300" border="1" align="left" bgcolor="#00CCFF"> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>Q966.com 1</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>Q966.com 2</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>Q966.com 3</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>Q966.com 4</td> \n
      <td> </td> \n
    </tr> \n
    <tr>  \n
      <td height="30"> </td> \n
      <td>Q966.com 5</td> \n
      <td> </td> \n
    </tr> \n
  </table> \n
</div> \n
</BODY></HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]