<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" >
var srl,con;
window.οnlοad=function(){
setTimeout(marquee,100);
srl=document.getElementById("srl");
con=document.getElementById("content");
};
function marquee(){
log("con.offsetWidth:"+con.offsetWidth+"\tsrl.scrollLeft:"+srl.scrollLeft+"\tsrl.width:"+srl.offsetWidth);
if((con.offsetWidth-srl.offsetWidth)<=srl.scrollLeft) //当demo1完全滚出显示区域时
srl.scrollLeft=0 //让内部滚动条p回归原位,造成连续滚动假象
else{
srl.scrollLeft++; //让demo的内部滚动条继续向左滚动1px
}
setTimeout(marquee,10);
}
function log(msg){
console.log(msg);
}
</script>
<style>
#srl{
overflow: hidden;
width: 500px;
border:red solid 1px;
}
#content{
margin: 10px;
width: 1000px;
height:140px;
color: blue;
overflow:hidden;
}
</style>
<title>javascript特效_滚动显示</title>
</head>
<body>
<div id="srl">
<div id='content'>
javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示javascript特效_滚动显示
</div>
</div>
</body>
</html>
javascript特效模拟marquee
最新推荐文章于 2019-09-12 14:43:54 发布