自己写的jQuery拖动滑块

  1 (function ($) {
  2             $.fn.bnSlide = function (options) {
  3                 var defaults = {
  4                     colorData: 0, //原始滑道的有效值
  5                     maxWidth: 10, //整个滑道有效值
  6                    // Width: 500, //整个容器的宽度
  7                     //height: 20//整个容器的高度
  8                 };
  9                 options = $.extend(defaults, options);
 10                 if (options.colorData < 0)
 11                     options.colorData = 0;
 12                 else if (options.colorData > options.maxWidth)
 13                     options.colorData = options.maxWidth;
 14 
 15                 var obj = this;
 16                 var objSlideColor = null; //有效轨道的对象
 17                 var objBlock = null; //滑块对象
 18                 var objPathway = null; //滑道对象
 19 
 20                 function print(nowX) {//有效滑道长度colorwidth
 21                     var nowData = options.maxWidth * nowX / maxPathway;
 22                     nowData = Math.round(nowData);
 23                     options.objPrint.val(nowData);
 24                 }
 25                 function blockAddress(nowX) {
 26                     objBlock.css({ "left": nowX + "px" });
 27                     objSlideColor.width(nowX);
 28                 }
 29                 /**
 30                 加载插件
 31                 **/
 32                 (function () {
 33                     var html = "";
 34                     html += "<div class=‘bnSlidePathway‘>";
 35                     html += "<div class=‘bnSlideColor‘></div>";
 36                     html += "</div>";
 37                     html += "<div class=‘bnSlideBlock‘></div>";
 38                     obj.addClass("bnSlide").html(html);
 39                     objSlideColor = $(".bnSlideColor", obj); //有效轨道的长度
 40                     objBlock = $(".bnSlideBlock", obj); //滑块对象 
 41                     objPathway = $(".bnSlidePathway", obj);
 42                 })();                
 43 
 44                 var objOffset = obj.offset();
 45                 var objLeft = objOffset.left; //滑道的left                     
 46                 var objWidth = obj.width(); //滑道长度               
 47                 var objBlockWidth = objBlock.width(); //滑块宽度
 48                 var maxPathway = objWidth - objBlockWidth; //有效长度
 49                 var colorWidth = options.colorData * maxPathway / options.maxWidth; //红色轨道的实际长度
 50                 objSlideColor.width(colorWidth);
 51                 objBlock.css({ "left": colorWidth });
 52                 options.objPrint.val(options.colorData);
 53 
 54                 $(document).on("mouseup", function () {
 55                     $(document).off("mousemove");
 56                 });
 57 
 58                 options.objPrint.on("blur", function () {
 59                     var nowData = $(this).val();
 60                     if (isNaN(nowData)) {
 61                         $(this).css("background-color", "red"); return;
 62                     }
 63                     if (nowData > options.maxWidth || nowData < 0) {
 64                         $(this).css("background-color", "red"); return;
 65                     }
 66                     $(this).css("background-color", "white");
 67                     var nowX = nowData * maxPathway / options.maxWidth;
 68                     blockAddress(nowX);
 69                 });
 70 
 71                 objPathway.on("click", function (event) {
 72                     var pointX = event.clientX;
 73                    var maxLeft=maxPathway+objLeft;
 74                    var nowX=0;
 75                    if(pointX>=maxLeft) nowX=maxPathway;
 76                    else nowX = pointX - objLeft;
 77 
 78                     blockAddress(nowX);
 79                     print(nowX);
 80                 });
 81 
 82                 objBlock.on("mousedown", function (event) {
 83                     var pointX = event.clientX; //鼠标坐标x,距浏览器
 84                     var blockX = $(this).offset().left; //滑块的left
 85                     var pointInBlockW = pointX - blockX; //鼠标在滑块的横向位置  
 86                     $(document).on("mousemove", function (event) {
 87                         pointX = event.clientX; //鼠标坐标
 88                         blockX = objBlock.offset().left; //滑块左坐标
 89                         var nowX = pointX - pointInBlockW - objLeft; //滑块的新坐标x,相对坐标;鼠标绝对坐标-鼠标在滑块中的位置-最外层left
 90                         if(pointX>=(objWidth+objLeft)){//如果鼠标超出滑道的最右边,取最大值
 91                             blockAddress(maxPathway);
 92                             print(maxPathway);
 93                         }  
 94                          else if(pointX<=objLeft)//如果鼠标超出滑道最左边,取最小值
 95                          {
 96                          blockAddress(0);
 97                          print(0);
 98                          }                                        
 99                         else  if (nowX >= maxPathway) {//如果滑块的当前距离大于等于有效滑道距离,不运动
100                              return;
101                         }
102                         else if (nowX <= 0) {//如果滑块的当前距离小于0,不运动
103                              return;
104                         }
105                         else {
106                             blockAddress(nowX);
107                             print(nowX);
108                         }
109                     });
110                 })
111             }
112         })(jQuery);

1 .bnTest { left: 100px;width: 500px; height: 20px;  }
2         .bnSlide { width: 500px; height: 20px; position: relative;}
3         .bnSlide .bnSlidePathway { background-color: Black; height: 10px; width: 100%; position: relative; top: 5px;  border-radius:20px;}
4         .bnSlide .bnSlidePathway .bnSlideColor { background-color:#52c2ec; width: 100%; height: 100%; border-top-left-radius:20px; border-bottom-left-radius:20px }
5         .bnSlide .bnSlideBlock { background-color: Gray; width: 20px; height: 20px; position: absolute; top: 0; left: 0; cursor: pointer; border-radius: 5px; }

1  $(function () {
2             $(".bnTest").bnSlide({ colorData: 2, objPrint: $(".bnSlideOutPrint") });
3         });

1 <input type="text" class="bnSlideOutPrint" />
2 <div class="bnTest"></div>