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

html部分

【js实现‘按住鼠标’的滑块拖动效果】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='https://www.it610.com/article/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='https://www.it610.com/article/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='https://www.it610.com/article/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();