<!-- 指向链接图片的URL --><base href="http://www.it365cn.com"><div align="center" id="demo" style="overflow:hidden;height:200px;width:95px;border-width:1px 1px 1px 1px;border-style:dotted dotted dotted dotted;"> <div id="demo1"> <!-- 定义内容--> 将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放将阿拉法拉发放 </div> <div id="demo2"></div></div>
<script language="javascript" type="text/javascript"><!--var demo = document.getElementById("demo");var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var speed=10; //滚动速度值，值越大速度越慢demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时 demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 else{ demo.scrollTop++ }}var MyMar = setInterval(Marquee,speed); //设置定时器demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器达到滚动停止的目的demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移开时重设定时器--></script>
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> Menu </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="Content-Language" content="zh-cn"><style type="text/css" title="">body{font:10pt;}#menu{ width:180px; height:80px; overflow:hidden;}#menu div{ border-left:1px solid silver; margin:2px; text-align:center; cursor: default;}#scrollleft,#scrollright{ position: absolute; top:3px; width:18px; background-color:white; left:0; filter: alpha(opacity=0,finishopacity=100,style=1,startx=100,finishx=100,starty=0,finishy=100);}#scrollleft{right:0;filter: alpha(opacity=100,finishopacity=0,style=1,startx=100,finishx=100,starty=0,finishy=100);}</style></head>
<body><div style="width:0px;height:0px;border:1px solid black;padding:3px;writing-mode:tb-rl;position: relative;"><div id="menu" onMouseWheel="step=event.wheelDelta;overit=1;Marquee(Math.abs(step)/step);overit=0" onMouseOver="this.focus();" οnmοuseοut="overit=0;"><div>关关雎鸠</div><div>在河之洲</div><div>窈窕淑女</div><div>君子好逑</div><div>参差荇菜</div><div>左右流之</div><div>窈窕淑女</div><div>寤寐求之</div><div>-----</div></div><div id="scrollright" οnmοuseοver="overit=1;Marquee(-1)" οnmοuseοut="overit=0;"></div><div id="scrollleft" οnmοuseοver="overit=1;Marquee(1)" οnmοuseοut="overit=0;"></div></div>
<script language="javascript" type="text/javascript">scrollleft.style.height=menu.offsetHeight;scrollright.style.height=menu.offsetHeight;
var str=menu.innerHTML;var d_scrollWidth=menu.scrollWidth;var d_childWidth=menu.firstChild.offsetWidth+1;var count=0;var flag=1;var overit=0;var MyMar;
while(menu.offsetWidth>menu.scrollWidth)menu.innerHTML+=str;menu.innerHTML+=str;
function Marquee(dir){if(flag&&overit){flag=0;count=0;MyMar=setInterval('Marquee2('+dir+')',10);}}
function Marquee2(dir){if(flag)return;if(d_scrollWidth<=(menu.scrollWidth-menu.offsetWidth-menu.scrollLeft)&&dir==-1){menu.scrollLeft=menu.scrollWidth-menu.offsetWidth-2;}if(menu.scrollWidth-menu.offsetWidth-menu.scrollLeft<1&&dir==1)menu.scrollLeft=menu.scrollWidth-menu.offsetWidth-d_scrollWidth+2;menu.scrollLeft+=dir;if(d_childWidth-count)count++;else{clearInterval(MyMar);flag=1;Marquee(dir);}}</script>
</body></html>
