Javascript之跑马灯效果

最新推荐文章于 2024-01-22 19:19:52 发布

weixin_34184158

最新推荐文章于 2024-01-22 19:19:52 发布

阅读量250

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3419199/blog/1483802

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一版本：

</style>
</head>
<body>
<div id="box">
   <div id="wrap">
   <div id="conBegin">
       <span>通知：</span>我们是先学习再考试,考试通过了才交学费;珠峰有完善的教学管理,考试和激励引导制度帮你不但学的会还要学的好!就业是我们的强项，平均就业工资超过12K。不但让你找到工作，还要能胜任工作。
   </div>
   </div>
</div>
<script>
   var box = document.getElementById('box')
   var conBegin = document.getElementById('conBegin')
   var wrap = document.getElementById('wrap')
   var timer = window.setInterval(function(){
       var curLeft = wrap.scrollLeft;
       wrap.scrollLeft = curLeft+1;
       var newLeft = wrap.scrollLeft;
       if(curLeft === newLeft){
           // clearInterval(timer)
           wrap.scrollLeft = 0; //虽然从头开始了，但是有一个切换闪动的结果
       }
   }, 50)
</script>
</body>
</html>

第二版本：升级(由于第一版本在结束切换的时候有一个闪动的结果，及不太好)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>跑马灯</title>
<style>
*{margin: 0; padding: 0; font-size: 14px; font-family: 'microsoft yahei'}
#box {margin:50px auto;padding:0 10px;width:500px;height:35px;line-height:35px;border:1px dashed green;background:lightgreen}
#wrap{
height:35px;overflow:hidden;white-space:nowrap;
}
#wrap div span{
color:red;font-weight:bold;
}
#wrap div{display:inline-block}
</style>
</head>
<body>
<div id="box">
   <div id="wrap">
   <div id="conBegin">
       <span>通知：</span>我们是先学习再考试,考试通过了才交学费;珠峰有完善的教学管理,考试和激励引导制度帮你不但学的会还要学的好!就业是我们的强项，平均就业工资超过12K。不但让你找到工作，还要能胜任工作。
   </div>
       <div id="conEnd">
       <span>通知：</span>我们是先学习再考试,考试通过了才交学费;珠峰有完善的教学管理,考试和激励引导制度帮你不但学的会还要学的好!就业是我们的强项，平均就业工资超过12K。不但让你找到工作，还要能胜任工作。
   </div>
   </div>
</div>
<script>
   var conBegin = document.getElementById('conBegin')
   var wrap = document.getElementById('wrap')
   var conBeginWidth = parseFloat(window.getComputedStyle(conBegin, null).width);
   var conEng = document.getElementById('conEnd')
   var timer = window.setInterval(function(){
       wrap.scrollLeft++;
       var curLeft = wrap.scrollLeft;
       if(curLeft>=conBeginWidth){
           wrap.scrollLeft = 0;
       }
   }, 10)
</script>
</body>
</html>