一个简单的播放进度条

来源：互联网发布：listview刷新数据编辑：程序博客网时间：2024/06/07 14:23
这个进度条是最初我在做显示视频播放进度时所作，很简单的一个进度条，做备忘。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <style type="text/css"> #box{    position: relative;    width: 780px;    height: 20px;    border: 1px solid #eee;    margin-bottom: 5px;    margin: 100px;}#bg{    height: 10px;margin-bottom: 5px;border: 1px solid #ddd;border-radius: 5px;overflow: hidden;}#bgcolor{    background: #5889B2;    width: 0;    height: 10px;    border-radius: 5px;}#bt{    width: 20px;height: 20px;    background: url(http://bbs.blueidea.com/data/attachment/album/201505/22/192934pwywwrt8cbrfwzfh.png) no-repeat center center;    border-radius: 17px;    overflow: hidden;    position: absolute;    left: 0px;    margin-left: -10px;top: -3px;    cursor: pointer;}#text{    width: 780px;    margin: 0 auto;    font-size: 16px;    line-height: 2em;}</style><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script></head> <body>  <div id="box">  <div id="bg">   <div id="bgcolor"></div>  </div>  <div id="bt"></div> </div> <div id="text"></div> <script type="text/javascript"> var init; (function($){  var $box = $('#box');  var $bg = $('#bg');  var $bgcolor = $('#bgcolor');  var $btn = $('#bt');  var $text = $('#text');  var statu = false;  var ox = 0;  var lx = 0;  var left = 0;  var bgleft = 0;     $btn.mousedown(function(e){   window.clearInterval(init);    lx = $btn.offset().left;    ox = e.pageX - left;    statu = true;   });   $(document).mouseup(function(){    statu = false;    init=self.setInterval("time()",1000);   });   $box.mousemove(function(e){    if(statu){     left = e.pageX - ox+11;     if(left < 0){      left = 0;     }     if(left > 780){      left = 780;     }     $btn.css('left',left);     $bgcolor.width(left);     $text.html('位置:' + parseInt(left/5) + '%');    }   });   $bg.click(function(e){    if(!statu){     bgleft = $bg.offset().left;     left = e.pageX - bgleft;     if(left < 0){      left = 0;     }     if(left > 780){      left = 780;     }     $btn.css('left',left);     $bgcolor.stop().animate({width:left},200);     $text.html('位置:' + parseInt(left/7.8) + '%');    }   });      init=self.setInterval("time()",1000); })(jQuery); function time(e){     var bgsleft = $('#bt').offset().left-$('#bg').offset().left+10;     var lefts = bgsleft+7.8;     if(lefts < 0){      lefts = 0;     }     if(lefts > 780){      lefts = 780;      $('#text').html('位置:100%');      $('#bt').css('left',lefts);     $('#bgcolor').stop().animate({width:lefts},200);      clearInterval(init);     }     else{     $('#bt').css('left',lefts);     $('#bgcolor').stop().animate({width:lefts},200);     $('#text').html('位置:' + parseInt(lefts/7.8) + '%');     }             } </script></div> </body> </html>
效果图如下：
阅读全文
0 0