jquery写拉动条

最新推荐文章于 2024-08-27 13:38:21 发布

weixin_34375251

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lixingbaophp/p/4943343.html

版权

 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>

转载于:https://www.cnblogs.com/lixingbaophp/p/4943343.html

weixin_34375251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写拉动条

1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鼠标滑动</title> 6 <script src="http://lib.sinaapp.com/js/j...
复制链接

扫一扫