本文介绍实现电子书自动阅读的功能,原理就是让滚动条一直下滚即可,停止时停止动画,switKey作为开关,防止多次点击自动阅读创建多个定时器。
html部分:
<!--自动阅读按钮-->
<div id="start" style="line-height:100px;text-align:center;right:50px;position: fixed;bottom: 400px;background: orange;width: 100px;height: 100px;color: #FFFFFF;font-size: 20px;font-weight: bold;border-radius:50%">自动翻页</div>
<div id="stop" style="line-height:100px;text-align:center;right:50px;position: fixed;bottom: 300px;background: blue;width: 100px;height: 100px;color: #FFFFFF;font-size: 20px;font-weight: bold;border-radius:50%">停止翻页</div>
js部分:
//自动阅读功能
var AutoPager = function(){
var obj = {
num : 10,
timesK : null,
start : $("#start"),
stop : $("#stop"),
switKey : true,
init : function(){
this.startClick();
this.stopClick();
},
Timer : function(){
if(this.switKey){
obj.timesK = setInterval(function(){
window.scrollBy(0,obj.num)
},100)
this.switKey = false;
}
},
clearTime : function(){
clearInterval(this.timesK);
this.switKey = true;
},
startClick : function(){
this.start.click(function(){
obj.Timer();
})
},
stopClick : function(){
this.stop.click(function(){
obj.clearTime();
})
}
}
return obj;
}
AutoPager().init()
有问题留言,我看到会第一时间回复。
昨天又优化了一下,去掉了开关,利用 null || true 返回true的原理,具体代码如下:
//自动阅读功能
var AutoPager = function(){
var obj = {
num : 10,
timesK : null,
start : $("#start"),
stop : $("#stop"),
init : function(){
this.startClick();
this.stopClick();
},
Timer : function(){
this.timesK = this.timesK || setInterval(function(){
window.scrollBy(0,obj.num)
},100)
},
clearTime : function(){
clearInterval(this.timesK);
this.timesK = null;
},
startClick : function(){
this.start.click(function(){
obj.Timer();
})
},
stopClick : function(){
this.stop.click(function(){
obj.clearTime();
})
}
}
return obj;
}
AutoPager().init()