跑马灯效果

<!--
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>跑马灯</title>
<style> 
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; }
#mq { width:220px; height:40px; line-height:20px; overflow:hidden; border:1px solid black; }
#mq div { position:absolute; width:220px; padding:0px 10px; }
</style>
<script type="text/javascript" >   
var scrlSpeed=1  
// decreasing speed for mozilla   
scrlSpeed=(document.all)? scrlSpeed : Math.max(1, scrlSpeed-1)   
function initScroll(container,object){   
    if (document.getElementById(container) != null){   
        var contObj=document.getElementById(container);   
       var obj=document.getElementById(object);   
        contObj.style.visibility = "visible";   
        contObj.scrlSpeed = scrlSpeed;   
        widthContainer = contObj.offsetWidth;   
        obj.style.left=parseInt(widthContainer)+"px";   
        widthObject=obj.offsetWidth;   
        interval=setInterval("objScroll('"+ container +"','"+ object +"',"+ widthContainer +")",20);   
        contObj.onmouseover = function(){   
            contObj.scrlSpeed=0;   
        }   
        contObj.onmouseout = function(){   
            contObj.scrlSpeed=scrlSpeed;   
        }    
    }   
}   
  
function objScroll(container,object,widthContainer){   
    var contObj=document.getElementById(container);   
    var obj=document.getElementById(object);   
    widthObject=obj.offsetWidth;   
    if (parseInt(obj.style.left)>(widthObject*(-1))){   
        obj.style.left=parseInt(obj.style.left)-contObj.scrlSpeed+"px";   
    } else {   
        obj.style.left=parseInt(widthContainer)+"px";   
    }   
}   
  
    
  
// on page load we initiate scrolling   
window.onload=function(){    
    initScroll("scrlContainer", "scrlContent");   
   }
</script>
  
<style type="text/css">
body{
    margin:0;
    padding:0;
    background:#fff;
    font: 70% Arial, Helvetica, sans-serif;
}
#scrlContainer{
    visibility:hidden;
    background:#f1f1f1;
    position:relative;
    overflow:hidden;
    width:250px;
    height:20px;
    line-height:20px;
    margin:1em;
}

#scrlContent{
    position:absolute;
    left:0;
    top:0;
    white-space:nowrap;
}
</style>


</head>
<body>
<div id="scrlContainer">   
    <div id="scrlContent">Some very, very useful information will   
appear here, yet it will move around your screen so it will be hard to   
read it. But the client wants it, so here it is. </div>   
</div>  
</body>
</html>
-->
<DIV id=demo style="overflow:hidden;height :80px;width :224px;background-color:green;color:#ffffff;
" align=center>
<DIV id=demo1> 
<!-- 定义图片 -->
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
 1111111111111111111111
</DIV>
<DIV id=demo2>
</DIV>
 
</DIV>
<SCRIPT>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
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>

你可能感兴趣的:(跑马灯)