跑马灯效果

最新推荐文章于 2025-08-09 20:51:19 发布

hehefefe

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/hehefefe/article/details/84089338

Javascript 专栏收录该内容

4 篇文章

订阅专栏

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