<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#Marquee{ height:60px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;}
</style>
</head>
<body>
<div id="Marquee">
<div style="width: 160px; height: 58px">111111</div>
<div style="width: 160px; height: 58px">22222</div>
<div style="width: 160px; height: 58px">3333333</div>
</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 60;//移动高度
var scrollstep=3;//移动步幅,越大越快
var scrolltime=20;//移动频度(毫秒)越大越慢
var stoptime=3000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
if(tmpH < picH){
tmpH += scrollstep;
if(tmpH > picH )tmpH = picH ;
Mar.scrollTop = tmpH;
setTimeout(start,scrolltime);
}else{
tmpH = 0;
Mar.appendChild(child_div[0]);
Mar.scrollTop = 0;
setTimeout(start,stoptime);
}
}
onload=function(){setTimeout(start,stoptime)};
</script>
</body>
</html>
跑马灯 (停顿);上下
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 近期项目中涉及到滚动新闻通知的跑马灯效果,封装的目的在于不断提高自己的技术能力,使得代码越来越精简,使控制器的负担...
- 因为业务需求,需要设置文字的跑马灯效果,查阅相关资料后发现资料比较散乱,现整理如下: 1.单跑马灯效果(系统自带T...
- Marquee(跑马灯) 说一下初衷吧,最初要用到跑马灯功能的时候,也找过一些SDK,但未能找到与我需求很好契合的...