<!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)
|