| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" c />
 <title>增强版一页内上下左右滚动</title>
 </head>
 <body>
 <p>注:上下滚动时,单元格demo1里面的内容高度要大于demo设置的高度才能无限滚动 </p>
 <p>左右滚动时,单元格demo1里面的内容宽度要大于demo设置的宽度才能无限滚动 </p>
 <p>一、上下滚动 </p>
 <p>1.显示的内容 </p>
 <p>2.向上滚动JS </p>
 <div id="demot" style="overflow: hidden; widht: 200px; height: 60px; ">
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td id="demot1"><table width="100%" height="120" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td height="30">一</td>
 </tr>
 <tr>
 <td height="30">二</td>
 </tr>
 <tr>
 <td height="30">三</td>
 </tr>
 <tr>
 <td height="30">四</td>
 </tr>
 <tr>
 <td height="30">五</td>
 </tr>
 <tr>
 <td height="30">六</td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td id="demot2"></td>
 </tr>
 </table>
 </div>
 <script type="text/javascript">
 function MarqueeToTop(){
 var speed=30
 var demo =document.getElementById("demot");
 var demo1 =document.getElementById("demot1");
 var demo2 =document.getElementById("demot2");
 var MyMarTop=setInterval(MarqueeTop,speed)
 demo2.innerHTML=demo1.innerHTML
 //原理是不断的向demoh2中填入demoh1中的内容,然后将已经看不见的清除
 //用一个两行一列的表格,上一列再放一个装填有内容的表格,定义为demoh1,下一列是空的TD,定义为demoh2
 //SPEED是用来控制速度的。
 demo.onmouseover=function(){ clearInterval(MyMarTop) }
 demo.onmouseout=function(){ MyMarTop=setInterval(MarqueeTop,speed) }
 function MarqueeTop(){
 if(demo2.offsetHeight-demo.scrollTop<=0)
 demo.scrollTop-=demo1.offsetHeight
 else{
 demo.scrollTop++
 }
 }
 }
 MarqueeToTop()
 </SCRIPT>
 <p>3.向下滚动JS </p>
 <div id="demod" style="overflow: hidden; widht: 200px; height: 100px; ">
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td id="demod1"><table width="100%" height="99" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td height="30">一</td>
 </tr>
 <tr>
 <td height="30">二</td>
 </tr>
 <tr>
 <td height="30">三</td>
 </tr>
 <tr>
 <td height="30">四</td>
 </tr>
 <tr>
 <td height="30">五</td>
 </tr>
 <tr>
 <td height="30">六</td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td id="demod2"></td>
 </tr>
 </table>
 </div>
 <script type="text/javascript">
 function MarqueeToDown(){
 var speed=30
 var demo = document.getElementById("demod");
 var demo1 = document.getElementById("demod1");
 var demo2 = document.getElementById("demod2");
 demo2.innerHTML=demo1.innerHTML
 demo.scrollTop=demo.scrollHeight
 var MyMarDown=setInterval(MarqueeDown,speed)
 demo.onmouseover=function() {clearInterval(MyMarDown)}
 demo.onmouseout=function() {MyMarDown=setInterval(MarqueeDown,speed)}
 function MarqueeDown(){
 if(demo1.offsetTop-demo.scrollTop>=0)
 demo.scrollTop+=demo2.offsetHeight
 else{
 demo.scrollTop--
 }
 }
 }
 MarqueeToDown()
 </script>
 <p>二、左右滚动 </p>
 <p>1.显示内容 </p>
 <p>2.向左滚动JS</p>
 <div id="demol" style="overflow:hidden;height:100px;width:200px;">
 <table cellpadding="0" cellspace="0" border="0">
 <tr>
 <td id="demol1"><table width="200" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>一</td>
 <td>二</td>
 <td>三</td>
 </tr>
 </table></td>
 <td id="demol2"></td>
 </tr>
 </table>
 </div>
 <p>3.向右滚动JS</p>
 <div id="demor" style="overflow:hidden;height:100px;width:200px;">
 <table cellpadding="0" cellspace="0" border="0">
 <tr>
 <td id="demor1"><table width="200" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>一</td>
 <td>二</td>
 <td>三</td>
 </tr>
 </table></td>
 <td id="demor2"></td>
 </tr>
 </table>
 </div>
 <script type="text/javascript">
 function MarqueeToLeft(){
 var speed=30
 var demo =document.getElementById("demol");
 var demo1 =document.getElementById("demol1");
 var demo2 =document.getElementById("demol2");
 var MyMarLeft=setInterval(MarqueeLeft,speed)
 demo2.innerHTML=demo1.innerHTML
 demo.onmouseover=function() {clearInterval(MyMarLeft)}
 demo.onmouseout=function() {MyMarLeft=setInterval(MarqueeLeft,speed)}
 function MarqueeLeft(){
 if(demo2.offsetWidth-demo.scrollLeft<=0)
 demo.scrollLeft-=demo1.offsetWidth
 else{
 demo.scrollLeft++
 }
 }
 }
 MarqueeToLeft()
 </script>
 <script type="text/javascript">
 function MarqueeToRight(){
 var speed=30
 var demo =document.getElementById("demor");
 var demo1 =document.getElementById("demor1");
 var demo2 =document.getElementById("demor2");
 var MyMarRight=setInterval(MarqueeRight,speed)
 demo2.innerHTML=demo1.innerHTML
 demo.onmouseover=function() {clearInterval(MyMarRight)}
 demo.onmouseout=function() {MyMarRight=setInterval(MarqueeRight,speed)}
 function MarqueeRight(){
 if(demo.scrollLeft<=0)
 demo.scrollLeft+=demo2.offsetWidth
 else{
 demo.scrollLeft--
 }
 }
 }
 MarqueeToRight()
 </script>
 </body>
 </html>
  (5.47 KB, 下载次数: 2) 
 |