js跑马灯效果

最新推荐文章于 2022-02-08 09:49:17 发布

Lloyd2008

最新推荐文章于 2022-02-08 09:49:17 发布

阅读量455

点赞数

分类专栏： web页面技术文章标签： CSS HTML

本文链接：https://blog.csdn.net/Lloyd2008/article/details/83724184

版权

web页面技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

开始自己也写了个跑马灯但是那效果不太好过度不够平滑以下是网上找的一个例子效果挺不错的
1.js


<script type="text/javascript" language="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>

2.css


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

3.html


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

Lloyd2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js跑马灯效果

开始自己也写了个跑马灯但是那效果不太好过度不够平滑以下是网上找的一个例子效果挺不错的1.js[code="java"]var scrlSpeed=1// decreasing speed for mozillascrlSpeed=(document.all)? scrlSpeed : Math.max(1, scrlSpeed-1)function initScr...
复制链接

扫一扫