jQuery实现可拖动进度条详解

本文主要介绍了jquery实现可拖动进度条实例代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下，希望能帮助到大家。

html

　　　

   

    

   

   

   
0%
  

css

　 .progress{position: relative; width:300px;margin:100px auto;}
  .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
  .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
  .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
  left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
  .progress_btn:hover{border-color:#F7B824;}

js　

$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
     if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').width(left);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').animate({width:left},300);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
   });

效果图

触发式加载精美特效企业网站源码1.0.0

触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也

下载

实现原理

　　首先是用mousedown()鼠标按下事件保存一个状态值，mouseup()鼠标抬起事件取消该状态，再同时配合mousemove()鼠标移动事件，实现按住拖动的效果。

在鼠标移动的同时去改变精度条的长度和按钮的相对左部的距离。

　　然后就是距离的计算，主要利用的就是pageX() 属性。pageX是鼠标指针相对于文档的左边缘的位置。在鼠标按下是就记录相对位置，在鼠标移动后就可求出鼠标移动的距离。从而改变按钮位置和进度条长度。

相关推荐：

实例讲解canvas实现圆形进度条动画

实现jquery-file-upload 文件上传带进度条效果的方法

微信小程序实现下载进度条的方法