<script type="text/javascript">
(function(){
var doc = document;
var b=0, t=0;
var cle;
function gId(id){
return doc.getElementById(id);
}
var tweenBtn = function(){
this._btn = gId('btn');
this._bar = gId('bar');
this._bp = gId('bp');
this.init()
} tweenBtn.prototype = {
init:function(){
var _self = this;
_self._btn.onclick = function(){
_self.clk();
}
_self.go();
},
clk:function(){
var _self = this;
t = 0;
_self.toStart();
clearTimeout(cle);
_self.go();
},
toStart:function(){
gId('bp').style.left = '0px';
},
go:function(){
var _self = this;
var s = _self._bar.offsetWidth;
function _go() {
_self.go();
}
if(t<s) {
t++;
cle = setTimeout(_go,10);
}
gId('bp').style.left = t + 'px';
}
}; new tweenBtn();
}());
</script>
问题:求解这段javascript代码神马意思??
最终效果图
(function(){
var doc = document;
var b=0, t=0;
var cle;
function gId(id){
return doc.getElementById(id);
}
var tweenBtn = function(){
this._btn = gId('btn');
this._bar = gId('bar');
this._bp = gId('bp');
this.init()
} tweenBtn.prototype = {
init:function(){
var _self = this;
_self._btn.onclick = function(){
_self.clk();
}
_self.go();
},
clk:function(){
var _self = this;
t = 0;
_self.toStart();
clearTimeout(cle);
_self.go();
},
toStart:function(){
gId('bp').style.left = '0px';
},
go:function(){
var _self = this;
var s = _self._bar.offsetWidth;
function _go() {
_self.go();
}
if(t<s) {
t++;
cle = setTimeout(_go,10);
}
gId('bp').style.left = t + 'px';
}
}; new tweenBtn();
}());
</script>
问题:求解这段javascript代码神马意思??
最终效果图
(function(){
var doc = document;
var b=0, t=0;
var cle;
// 根据id获取dom元素
function gId(id){
return doc.getElementById(id);
}; // 创建一个表示中间按钮的类
var tweenBtn = function(){
this._btn = gId('btn');
this._bar = gId('bar');
this._bp = gId('bp');
this.init()
}; // 类的属性
tweenBtn.prototype = {
init:function(){
var _self = this;
_self._btn.onclick = function(){
_self.clk();
};
_self.go();
},
// 重新开始
clk:function(){
var _self = this;
t = 0;
_self.toStart();
clearTimeout(cle);
_self.go();
},
toStart:function(){
gId('bp').style.left = '0px';
},
// 开始进行滚动
go:function(){
var _self = this;
var s = _self._bar.offsetWidth;
function _go() {
_self.go();
};
if(t<s) {
t++;
// _go 10ms后 自调
cle = setTimeout( _go , 10 );
};
gId('bp').style.left = t + 'px';
}
};
new tweenBtn();
}());