您的位置：首页 > Web前端 > JavaScript

js实现滚动条效果

2016-08-10 00:00 288 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#con{height: 20px;width: 1px;background: #008000;text-align: center;color: #fff;}
#btn{height: 20px;width: 40px;}
</style>
</head>
<body>
<div id="con"></div>
<input type="submit" id="btn"value="点击"/>
<input type="submit" id="stop" value="停止"/>
<div></div>
</body>
<script type="text/javascript">
var oBtn=document.getElementById("btn");
var oStop=document.getElementById("stop");
var oCon=document.getElementById("con");
var process=0;
var timer=null;//和setTimeout()一样，声明timer用来关闭requestAnimationFrame()（请求动画帧）的;
var flag=false;//用来监视按钮，防止在运动中受按钮的重复影响
window.requestAnimationFrame=window.RequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame;
window.cancelRequestAnimationFrame=window.CancelRequestAnimationFrame||window.webkitCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame;
oBtn.addEventListener("click",function (){//添加时间委托，没写IE的兼容性
if(!flag){
timer=requestAnimationFrame(callback);
}
},false);
oStop.addEventListener('click',function(){//添加时间委托
window.cancelRequestAnimationFrame(timer);
flag=false;
},false);
function callback(){
process+=1;//缺点是如果这个数自加不会是100就会在小于100的最大倍数停止，如小数，3,7，等等
if(process<=100){
oCon.style.width=process+'%';
oCon.innerHTML=process+'%';
timer= requestAnimationFrame(callback);//用递归的方法来实现重复调用
}
flag=true;
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 滚动条事件委托 js滚动条进度条

相关文章推荐

新的分享

章节导航