<div id=demo style=overflow:hidden;height:70;width:400>
<div id=demo1>
<a href='' target='_blank'>这是滚动第1行</a><br>
这是滚动第2行<br>
这是滚动第3行<br>
这是滚动第4行<br>
这是滚动第5行<br>
这是滚动第6行<br>
这是滚动第7行<br>
这是滚动第8行<br>
这是滚动第12行<br>
这是滚动第13行<br>
这是滚动第14行<br>
这是滚动第15行<br>
这是滚动第16行<br>
这是滚动第17行<br>
这是滚动第18行<br>
</div>
<div id=demo2></div>
</div>
<a id=tt></a>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++
}
document.getElementById('tt').innerHTML="demo1.offsetHeight:"+demo1.offsetHeight+",demo2.offsetTop:"+demo2.offsetTop+",demo.scrollTop:"+demo.scrollTop;
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
示例2:
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>--</title>
<style>
/*主窗*/
#Scroll{width:200px;height:40px;background:#f8f8f8}
/*左边内容区*/
#ScroLeft{float:left;height:100%;width:190px;overflow:hidden}
/*滚动条背景*/
#ScroRight{position:relative;float:right;height:100%;width:10px;background:#F1F1F1;overflow:hidden;}
/*滚动条*/
#ScroLine{position:absolute;z-index:1;top:0px;left:0px;width:100%;height:20px;overflow:hidden;background:#666666}
</style>
</head>
<script>
var Scrolling=false;
function $(o){return document.getElementById(o)}
function ScroMove(){Scrolling=true}
document.onmousemove=function(e){if(Scrolling===false)return;ScroNow(e)}
document.onmouseup=function(e){Scrolling=false}
function ScroNow(event){
var event=event?event:(window.event?window.event:null);
var Y=event.clientY-$("Scroll").getBoundingClientRect().top-$("ScroLine").clientHeight/2;
var H=$("ScroRight").clientHeight-$("ScroLine").clientHeight;
var SH=Y/H*($("ScroLeft").scrollHeight-$("ScroLeft").clientHeight);
if (Y<0)Y=0;if (Y>H)Y=H;
$("ScroLine").style.top=Y+"px";
$("ScroLeft").scrollTop=SH;
}
function ScrollWheel(){
var Y=$("ScroLeft").scrollTop;
var H=$("ScroLeft").scrollHeight-$("ScroLeft").clientHeight;
if (event.wheelDelta >=120){Y=Y-80}else{Y=Y+80}
if(Y<0)Y=0;if(Y>H)Y=H;
$("ScroLeft").scrollTop=Y;
var SH=Y/H*$("ScroRight").clientHeight-$("ScroLine").clientHeight;
if(SH<0)SH=0;
$("ScroLine").style.top=SH+"px";
}
</script>
<body>
<div id="Scroll" onselectstart="return false" onmousewheel="ScrollWheel()">
<div id="ScroLeft">
内容1111<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容5555<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容<br>内容0000<br>
</div>
<div id="ScroRight" onclick="ScroNow(event)">
<div id="ScroLine" OnMouseDown="ScroMove()"></div>
</div>
</div>
</body>
</html>