<html> <head> <style type="text/css"> #demo{ font-size:normal 14px; line-height: 7px; height:100px; width:200px; overflow:hidden; border:4px solid #ddd; text-align:center; } #demo1 #demo2{ height:80px; width:160px; float:center; } </style> </head> <body> <div id="demo"> <div id="demo1"> <p>你好啊</p> <p>欢迎下次光临</p> <p>要买就速度点</p> <p>别扣扣索索的</p> <p>我真的走了，你再不买就没得了</p> </div> <div id="demo2"></div> </div> <script type="text/javascript"> var speed= 1; demo2.innerHTML = demo1.innerHTML; //设置一个空的div，把现有的div赋值给它 function marquee(){ if(demo2.offsetTop - demo.scrollTop <= 0){ //判断第一个div到底部了没有 demo.scrollTop -= demo1.offsetHeight; }else{ demo.scrollTop++; } } var MyMar=setInterval(marquee,speed); demo.onmouseover=function(){clearInterval(MyMar)}; demo.onmouseout =function(){MyMar=setInterval(marquee,speed)} </script> </body> </html>
<html> <h2>bianse</h2> <div id="scrollWrap"><div id="scrollMsg">我abcaef>abcaefgabcaefgabcaefgab<caefgabcaefgabcae<>fgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefgabcaefg</div></div> <style type="text/css"> #scrollWrap { width:100px; height: 200px; overflow: hidden; border:2px solid red; word-wrap:break-word; } h2 {color:red;background:#FFF; } h2:hover{color:green;background:purple;} </style> <script type="text/javascript"> try{ var isStoped = false; var oScroll = document.getElementById("scrollWrap"); with(oScroll){ noWrap = true; } oScroll.onmouseover = new Function('isStoped = true'); oScroll.onmouseout = new Function('isStoped = false'); var preTop = 0; var curTop = 0; var stopTime = 0; var oScrollMsg = document.getElementById("scrollMsg"); oScroll.appendChild(oScrollMsg.cloneNode(true)); init_srolltext(); }catch(e) {} function init_srolltext(){ oScroll.scrollTop = 0; setInterval('scrollUp()', 15); } function scrollUp(){ if(isStoped) return; curTop += 1; if(curTop == 52) { stopTime += 1; curTop -= 1; if(stopTime == 180) { curTop = 0; stopTime = 0; } }else{ preTop = oScroll.scrollTop; oScroll.scrollTop += 1; if(preTop == oScroll.scrollTop){ oScroll.scrollTop = 0; oScroll.scrollTop += 1; } } } </html>