<!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" content="text/html; charset=gb2312" />
<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> |
