1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鼠标滑动</title> 6 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 7 <style> 8 9 .start-num,.end-num{display:block;padding: 2px 5px;width:100px;} 10 .h-line{height:100px;width:2px;background:red;position:relative;left:49px;} 11 .startNav,.endNav,.tnav{position:absolute;left:0;} 12 .startNav,.endNav{width:2px;background-color: #999;} 13 .tnav{display:block;width:10px;height:5px;background:black;cursor: pointer;} 14 .startNav,.endNav .tnav{top:0;} 15 .endNav,.startNav .tnav{bottom:0;} 16 </style> 17 </head> 18 <body> 19 <input type="text" class="input"> 20 <script> 21 addNumEvent($('.input')); 22 /** 23 * param : dom 24 * param : start-num default=0 25 * param : end-num default=100 26 */ 27 function addNumEvent(){ 28 var len = arguments.length; 29 if(len == 0){ 30 console.log('请填写DOM'); 31 } 32 if(len >= 1){ 33 var getDOM = arguments[0]; 34 } 35 if(len >= 2){ 36 var numStart = parseInt(arguments[1]); 37 }else{ 38 var numStart = 0; 39 } 40 if(len >= 3){ 41 var numEnd = parseInt(arguments[2]); 42 }else{ 43 var numEnd = 100; 44 } 45 temDOM = $(getDOM); 46 temDOM.wrap('<div class="NumBox"></div>'); 47 temDOM.each(function(){ 48 thisDOM = $(this); 49 //thisDOM.hide(); 50 var numBox = thisDOM.parents('.NumBox'); 51 var str = ''; 52 str += '<input class="start-num" value="'+numStart+'">'; 53 str += '<div class="h-line">'; 54 str += '<div class="startNav">'; 55 str += '<div class="tnav"></div>'; 56 str += '</div>'; 57 str += '<div class="endNav">'; 58 str += '<div class="tnav"></div>'; 59 str += '</div>'; 60 str += '</div>'; 61 str += '<input class="end-num" value="'+numEnd+'">'; 62 numBox.append(str); 63 var startNav = numBox.find('.startNav .tnav'); 64 var endNav = numBox.find('.endNav .tnav'); 65 var hLine = numBox.find('.h-line'); 66 var startLine = numBox.find('.startNav'); 67 var endLine = numBox.find('.endNav'); 68 var startInput = numBox.find('.start-num'); 69 var endInput = numBox.find('.end-num'); 70 startNav.mousedown(function(){ 71 numBox.mousemove(function(e){ 72 if(numStart+(numEnd-numStart)*(e.pageY-hLine.offset().top)/hLine.height()<=endInput.val()){ 73 startLine.height(e.pageY-hLine.offset().top); 74 startInput.val(numStart+(numEnd-numStart)*startLine.height()/hLine.height()); 75 } 76 }); 77 78 }); 79 endNav.mousedown(function(){ 80 numBox.mousemove(function(e){ 81 if(numEnd-(numEnd-numStart)*(hLine.height()+hLine.offset().top-e.pageY)/hLine.height()>=startInput.val()){ 82 endLine.height(hLine.height()+hLine.offset().top-e.pageY); 83 endInput.val(numEnd-(numEnd-numStart)*endLine.height()/hLine.height()); 84 } 85 }); 86 }); 87 $(document).mouseup(function(){ 88 numBox.unbind('mousemove'); 89 thisDOM.val('{"min":"'+startInput.val()+'","max":'+endInput.val()+'}'); 90 console.log(thisDOM.val()); 91 }); 92 }); 93 94 } 95 </script> 96 </body> 97 </html>
