js实现‘按住鼠标’的滑块拖动效果

html部分

        <div id="back">
          <div id="slide">
            <div id="start">
              
            div>
            <div id="lineBox">
              <div id="dash">div>
            div>
            <div id="end">
              
            div>
          div>
        div>

css部分（注：边框均用的白色）

          body{
            background: url(images/slide8_bg.jpg);
          }
          div{
            opacity:0.8;
          }
          #slide{
            width: 250px;
            height: 50px;
            position: absolute;
            top:50%;
            left:50%;
            margin: -25px 0 0 -110px;
          }
          #lineBox{
            width:190px;
            height:100%;
            position:absolute;
            left:20px;
            overflow: hidden;
          }
          #dash{
            position:absolute;
            width:200px;
            left:0px;
            top:25px;
            border-top:2px dashed #fff;
          }
          #start{
            width:25px;height:25px;
            border:1px solid #fff;
            position:absolute; top:12px;
            cursor: pointer;
            z-index: 1;
            /*-webkit-transition: all 0.2s ease;
               -moz-transition: all 0.2s ease;
                -ms-transition: all 0.2s ease;
                 -o-transition: all 0.2s ease;
                    transition: all 0.2s ease;*/
            -webkit-transform: rotate(45deg);
               -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                 -o-transform: rotate(45deg);
                    transform: rotate(45deg);
          }
          #start>span{
            display: block;
            width:6px; height:6px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-top:9px; margin-left: 9px;
          }
          #end{
           width:8px; height:8px;
           border:1px solid #fff;
           position:absolute;
           top:21px;
           right: 28px; 
          }
          #end>span{
            width:6px; height:6px;
            border-radius: 50%;
            background:#fff;
            position:absolute;
            top:1px;
            right: 1px;
          }
          #back{
            position:absolute;
            width:100%; height:100%;
          }

js部分

        var x,timer;
        var start = $('#start').offset().left+16;


        $('#back').bind('mousemove', function(e) {//追踪鼠标位置  
          x= e.pageX;
          x-=start;

        });
        $('#start').bind('mousedown', function() {//点击创建定时器
            timer = setInterval(function(){
            $('#start').css('left', x);
            if(x>204){
              $('#start').css('left', 204);
              clearInterval(timer);
              timer=null;x=null;
              //location.href='Mike Smith.html';
            }else if(x<=0){
              $('#start').css('left', 0);
              clearInterval(timer);
            }
          }, 50)
        });
        $('#back').on('mouseup',function() {//松开鼠标清除定时器
          clearInterval(timer);
          if(x<204){
            $('#start').css('left', 0);
          }
        });

10/19日改：
学习了H5的拖放API，优化js代码

        var sta = $('#start').offset().left+15;
        start.ondragstart = function(){//拖动事件开始
          console.log('拖放事件开始');
        }
        start.ondrag = function(e){//拖动事件过程
          var x = e.pageX-sta;
          if(x<0){
            start.style.left=0+'px';
          }else if(x>204){
            start.style.left=204+'px';
            sta=null;x=null;
            //location.href='Mike Smith.html';
          }else{
            start.style.left=x+'px';
          }
        }
        start.ondragend = function(e){//拖动事件结束
          var x = e.pageX-sta;
          if(x<204){
            $('#start').animate({left: 0},300);
          }
        }

10/20 js代码优化(用对象封装，避免全局污染)（H5拖放api主要作用是传递数据，其中默认样式难以清除，故重写一份）

        var slideBlock={
          x:null,timer:null,LIMIT:204,START :$('#start').offset().left+16,
          init:function(){
            var that = this;
            $('#back').bind('mousemove', slideBlock.moveX.bind(that));
            $('#start').bind('mousedown', slideBlock.down.bind(that));
            $('#back').on('mouseup', slideBlock.up.bind(that));
          },
          moveX:function(e) {
          this.x = e.pageX;
          this.x -= this.START;

          },
          down:function() {
            clearInterval(this.timer);
            this.timer = setInterval(function(){
              console.log(this.x);
            $('#start').css('left', this.x);
            if(this.x>204){
              $('#start').css('left', 204);
              clearInterval(this.timer);
              this.timer=null;
              //location.href='Mike Smith.html';
            }else if(this.x<=0){
              $('#start').css('left', 0);
              clearInterval(this.timer);
              this.timer=null;
            }
            }.bind(this), 50);
          },
          up:function() {
            clearInterval(this.timer);
            this.timer=null;
            if(this.x<204){
              $('#start').animate({left: 0}, 300)
            } 
          },
        };
        slideBlock.init();