一个简单的播放进度条

最新推荐文章于 2024-02-24 15:34:39 发布

我在等待微笑

最新推荐文章于 2024-02-24 15:34:39 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/qq_34307209/article/details/73167194

版权

这个进度条是最初我在做显示视频播放进度时所作，很简单的一个进度条，做备忘。

代码如下：

<!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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个简单的播放进度条

这个进度条是最初我在做显示视频播放进度时所作，很简单的一个进度条，做备忘。代码如下： #box{ position: relative; width: 780px; height: 20px; border: 1px solid #eee; margin-bottom: 5px; margin: 100px;}#bg{
复制链接

扫一扫