图片或文字或图文混合连续滚动

类别:网站制作 点击:0 评论:0 推荐:

//向左连续滚动

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 381px;valign:top">   
<!--定义DIV为DEMO-->    

   <!--DIV定义一个层用于装载需要滚动的表格 注意表格中所有元素的宽度要比上面定义的WIDTH要大,否则不能连续滚动-->    
   <!--如果是数据库操作,在这里得到需要显示的图片及文字-->    
          <table border="0" width="100%" cellpadding="0" cellspacing="0">
       <tr><td id=demo1>
   <!--本TD定义为DEMO1-->    
       <table border="0" width="100%" cellspacing="0" cellpadding="0">
                          <tr>
                            <td>
   <!--这里是放图片的地方,由于我使用 PHP因此写的是PHP格式,可以使用任何语言在这里得到图片或是静态皆可-->    
                              <?php echo $midshow[1];?>
                            </td>
          <td>&nbsp;</td>
   <!--这里产生一个空隙-->    
                            <td>
                              <?php echo $midshow[2];?>
          <td>&nbsp;</td>
                            <td>
                              <?php echo $midshow[3];?>
          <td>&nbsp;</td>
                            <td>
                              <?php echo $midshow[4];?>
          <td>&nbsp;</td>
                            <td>
                              <?php echo $midshow[5];?>                       
                            </td>      
                          </tr>
           <tr>
   <!--这里是放文字介绍的地方-->    
             <td><p align="center">
            <?php echo $middownshow[1];?></p>
          </td>
          <td>&nbsp;</td>
             <td><p align="center">
            <?php echo $middownshow[2];?></p>
          </td> 
          <td>&nbsp;</td>
             <td><p align="center">
            <?php echo $middownshow[3];?></p>
          </td> 
          <td>&nbsp;</td>
             <td><p align="center">
            <?php echo $middownshow[4];?></p>
          </td> 
          <td>&nbsp;</td>
             <td><p align="center">
            <?php echo $middownshow[5];?></p>
          </td>                        
           </tr>
                      </table></td><td id=demo2>  <!--本TD 定义为DEMO2-->     </td></tr></table>
            <SCRIPT language="javascript">
   <!--

var speed=20
//原理是不断的向DEMO2中填入DEMO1中的内容,然后将已经看不见的清除
//用一个两列一行的表格,左边再放一个装填有内容的表格,定义为DEMO1,右边是空的TD,定义为DEMO2
//SPEED是用来控制速度的。  

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>
                  </div>

</body>
</html>

 

 


//向上连续滚动
   <!--上面已经作了详细注释,以下就不做注释了。。。-->    

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 160px; HEIGHT: 240px;valign:top">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TR>
 <TD id=demo1>
      <TABLE cellSpacing=0 cellPadding=3 border=0 width="141">
        <TBODY>
        <TR>
          <TD vAlign=top><A href="<?php echo $midlink[1];?>">
   <img src="<?php echo $midshow[1];?>" border=0></A>
   </TD>
        </TR>
        <TR>
          <TD vAlign=top><a href="<?php echo $midlink[2];?>">
    <img src="<?php echo $midshow[2];?>" border=0></a></TD>
        </TR>
        <TR>
          <TD vAlign=top><a href="<?php echo $midlink[3];?>">
   <img src="<?php echo $midshow[3];?>" border=0></a></TD>
        </TR>
        <TR>
          <TD vAlign=top><a href="<?php echo $midlink[4];?>">
   <img src="<?php echo $midshow[4];?>" border=0></a></TD>
        </TR>
      </TABLE>
   </TD>
 </TR>
 <TR>
   <TD id=demo2 vAlign=top> </TD>
 </TR>
</TBODY>
</TABLE>
</DIV><SCRIPT>
var speed=20
//原理是不断的向DEMO2中填入DEMO1中的内容,然后将已经看不见的清除
//用一个两行一列的表格,上一列再放一个装填有内容的表格,定义为DEMO1,下一列是空的TD,定义为DEMO2
//SPEED是用来控制速度的。  
demo2.innerHTML=demo1.innerHTML
function Marquee(){if(demo2.offsetHeight-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{  demo.scrollTop++  }  }
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>

本文地址:http://com.8s8s.com/it/it31145.htm