上次我们设置了一个背景图片在舞台自上而下的移动,但是因为只有一张背景图片的原因,导致总有那么一刻背景图片会从上面滑下来,就是说我们的背景保持住了短暂的连续性,但不能长时间保持,因此我们要解决这个问题,需要我们一开时就在舞台加载两张背景图片,用时钟该控件来控制这两张图片一起移动,并且实时判断两张图片相对与舞台的位置,完成第一张图片结束时第二张图片顶上,第二章图片结束时第一张图片顶上
在html中加入两张图片
<div id="stage">
<div class="bg1"></div>
<div class="bg2"></div>
</div>
js
$(function(){
//这里写代码的时候是可以控制所有htmldom节点的
//dom
var stage=document.getElementById("stage"); //获取舞台节点
var bg1=stage.getElementsByClassName("bg1")[0];//获取背景图片
// console.log(bg1) //检查是否捕获bg1
var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
var topval=-200;
var topval2=-968;
var k=0;
// bg1.style.cssText="top: -30px;"
var t1=setInterval(function(){
k++;
if(k==768){
topval=-968;
}else if(k==768*2){
topval2-968;
k=0;
}
// console.log("ddd")
// console.log(bg1.style.cssText)
// bg1.scrollTop=bg1.scrollTop+10;
bg1.style.cssText="top: "+topval+"px";
topval+=1;
bg2.style.cssText="top: "+topval2+"px";
topval2+=1;
//topval++背景向下移动
},10);
// t1.clearInterval(); //时钟停止
// 第二章图片
// var stage=document.getElementById("stage"); //获取舞台节点
// // console.log(bg1) //检查是否捕获bg1
// // bg1.style.cssText="top: -30px;"
// var t1=setInterval(function(){
// // console.log("ddd")
// // console.log(bg1.style.cssText)
// // bg1.scrollTop=bg1.scrollTop+10;
// bg2.style.cssText="top: "+topval2+"px";
// topval2+=1
// //topval++背景向下移动
// },70);
});