两个文字向上滚动案列 

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

 



 






 






            

            
posted @ 
2014-07-14 17:00 
雨落知音 
阅读(243) 
评论(0) 
 
收藏 
举报