ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Marquee(跑马灯)横向、纵向、无空白的不间断连续循环滚动代码

2019-11-16 12:54:03  阅读:454  来源: 互联网

标签:function 交通工具 Marquee demo 跑马灯 不间断 最牛


https://bbs.csdn.net/topics/120063623

可以通过改造,让datalist的列表内容呈现跑马灯效果

Marquee(跑马灯)横向、无空白的不间断连续循环滚动代码!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 </HEAD>

 <BODY>
<table width="760" align="center" border="1" >
  <tr>
    <td align="center">

     <div id=demo style='overflow:hidden;height:110px;width:750px;'>
     <table height=110 border=0 cellspacing=0 cellpadding=0>
 <tr>
 <td id=demo1>
 <!-- 下面是你要显示的内容 -->
 <table width=780>
 <tr>
 <td>第一</td>

 <td>第二</td>

 <td>文章标题</td>

 <td>最牛交通工具<br>添  加:<br>更新时间:2004年10月9日'</td>

     <td>经典动物幽默图集<br>添  加:<br>更新时间:2004年10月7日'</td>

 <td>新化二中<br>添  加:<br>更新时间:2004年10月7日'</td>

     </tr>
 </table>
      <!-- 显示的内容结束! -->

 </td>
 <td id=demo2></td>
 </tr>
 </table>
     </div>

 </td>
    </tr>
   </table>

<script>
   var speed=15
   demo2.innerHTML=demo1.innerHTML
   function Marquee(){
   if(demo2.offsetWidth-demo.scrollLeft<=0)
   demo.scrollLeft-=demo1.offsetWidth
   else{
   demo.scrollLeft++
   }
   }
   var MyMar=setInterval(Marquee,speed)
   demo.onmouseover=function() {clearInterval(MyMar)}
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

</BODY>
</HTML>

========================================================================

Marquee(跑马灯)纵向、无空白的不间断连续循环滚动代码!

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.0   Transitional//EN "> 
<HTML> 
  <HEAD> 
  </HEAD> 

  <BODY> 

    <table width="100%" border="0" cellspacing="2" cellpadding="2">


<tr><td align="center"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td width="194" style="padding-top:8px" valign="top">
  <DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
  <DIV id=rolllinkk1>

  <!--   下面是你要显示的内容   --> 
  <table width="100%" border="0" cellspacing="2" cellpadding="2">

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

<tr><td align="center">最牛交通工具</td></tr>

</table>
    <!--   显示的内容结束!   --> 

                  <DIV align=center></DIV></DIV>
                  <DIV id=rolllinkk2>

                  <DIV align=center></DIV></DIV></DIV>
                  <SCRIPT>
var rollspeed=30   
rolllinkk2.innerHTML=rolllinkk1.innerHTML //
function Marquee1(){
if(rolllinkk2.offsetTop-rolllinkk.scrollTop<=0) //
rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
else{
rolllinkk.scrollTop++


var MyMar1=setInterval(Marquee1,rollspeed) //
rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
</SCRIPT>
</td>

  </tr>
</table>
</td></tr>

</table>

 
</BODY> 
</HTML> 

标签:function,交通工具,Marquee,demo,跑马灯,不间断,最牛
来源: https://www.cnblogs.com/proving/p/11871428.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有