zoukankan      html  css  js  c++  java
  • jquery写拉动条

     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>

  • 相关阅读:
    POJ 3977 折半枚举
    [CQOI2007]余数求和 (分块+数学
    NOI P1896 互不侵犯 状压DP
    HDU 5446 Unknown Treasure (卢卡斯+CRT
    宁夏邀请赛F FLOYD
    P1414 又是毕业季II (数学?
    P2051 [AHOI2009]中国象棋 DP
    POJ 2449:Remmarguts' Date(A* + SPFA)
    HDU 6215:Brute Force Sorting(链表+队列)
    HDU 6207:Apple(Java高精度)
  • 原文地址:https://www.cnblogs.com/lixingbaophp/p/4943343.html
Copyright © 2011-2022 走看看