img: [ 'about.png', 'applyBtn.png', 'background2.png', 'bgImg.png', 'bird.cman.png', 'borad2.png',
'choujiang.png','entry.png','f_0.png','f_1.png','f_2.png','f_3.png',
'f_4.png','f_5.png','f_6.png','f_7.png','f_8.png','f_9.png',
'fxFBfont.png','ground.2.png','logo.png','pgBar.png','pgBg.png','pipe2.png',
'raffle.png','rank.png','rankBtn.png','ruleBtn.png','shareButton.png',
'shareImg.png','sureBtn.png','tap.png','titleImg.png','trymore.png'
],
count: 1,
go: 1,
init: function () {
var _this = this
$.get('dom.txt', function (response) {
$('#gameDiv').append(response)
_this.move()
})
this.count += this.img.length
this.go = this.count
this.loadImg()
},
loadImg: function () {
for (var i = 0i <this.img.lengthi++) {
var img = new Image()
var _this = this
img.onload = function () {
_this.move()
}
img.src = 'resource/assets/' + this.img[i]
}
return this
},
move: function () {
--this.go
var press = Math.round((this.count - this.go) / this.count * 100)
console.log('游戏加载进度', press)
// if(press === 100){
// start.init()
// }
}
}
jsload.init()
图片 和txt加载 可以参考下
我想到三种实现方法：1、CSS字体支持反色效果。你可以用css实现。
2、CSS得遮罩效果，做两层把下面遮住，一点点露出来。
3、用canvas绘图。
单进图条模式需要进度条长度为1000px的整数倍，多进度条模式方法就多了，以两根进度条为例来表达的话可以第一根进度条表示1/100的精度，只要长度为100px的整数倍。第二个进度条的精度为1/10，长度需要为10px的整数倍。动画效果为第二根进度条满了第一根进度条进度加1就好了，这样组合起来就可以达到表示1/1000精度的效果。
当然，如果布局有限制直接将值表示在进度条上就行了，前端基本没有多少会刻意的要求动画精度吧。
