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>
