js 滑块 slider 支持PC和移动端制作甘特图用

  1 (function () {
  2     'use strict';
  3     var demo = function (options) {
  4         //demo("options") 或者 new demo("options")都可以使用demo方法
  5         if (!(this instanceof demo)) { return new demo(options) };
  6 
  7         // 参数合并 extend方法体在下面
  8         this.options = this.extend({
  9             "minDiv": ""
 10         }, options);
 11         this.init();
 12         //初始化
 13     };
 14     //事件
 15     var ifBool = false; //判断鼠标是否按下
 16     var _currentMinDiv = null;
 17     var _currentvals = null;
 18     var _currentline = null;
 19     var start = function (e) {
 20         e.stopPropagation();
 21         ifBool = true;
 22         _currentMinDiv = this;
 23         _currentvals = this.children[0];
 24         _currentline = this.parentNode;
 25         //console.log("鼠标按下")
 26     }
 27     var move = function (e) {
 28         //console.log("鼠标拖动")
 29         if (ifBool) {
 30             if (!e.touches) {    //兼容移动端
 31                 var x = e.clientX;
 32             } else {     //兼容PC端
 33                 var x = e.touches[0].pageX;
 34             }
 35             var lineDiv_left = getPosition(_currentline).left; //长线条的横坐标
 36             var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
 37             var linemax = _currentline.attributes["attr_max"].nodeValue
 38             var linemin = _currentline.attributes["attr_min"].nodeValue;
 39             var maxleft = linemax / 100 * (_currentline.offsetWidth - 15);  //最大px
 40             var minleft = linemin / 100 * (_currentline.offsetWidth - 15);  //最小px
 41             if (minDiv_left > maxleft) {
 42                 minDiv_left = maxleft;
 43             }
 44             else if (minDiv_left < minleft) {
 45                 minDiv_left = minleft;
 46             }
 47             //设置拖动后小方块的left值
 48             _currentMinDiv.style.left = minDiv_left + "px";
 49             _currentvals.innerText = parseInt((minDiv_left / (_currentline.offsetWidth - 15)) * 100);
 50             //设置中间的线的颜色
 51             setColor(_currentline);
 52         }
 53     }
 54     var end = function (e) {
 55         //console.log("鼠标弹起")
 56         ifBool = false;
 57     }
 58     demo.prototype = {
 59         init: function () {
 60             this.options.minDiv.addEventListener("touchstart", start);
 61             this.options.minDiv.addEventListener("mousedown", start);
 62             var _this = this;
 63             _this.options.vals = _this.options.minDiv.children[0];
 64             _this.options.line = _this.options.minDiv.parentNode;
 65             _this.options.max = 100;
 66             _this.options.min = 0;
 67             _this.options.minDiv.parentNode.setAttribute('attr_max', 100);
 68             _this.options.minDiv.parentNode.setAttribute('attr_min', 0);
 69             _this.options.isdrop = true;
 70         },
 71         // 参数合并方法体
 72         extend: function (obj, obj2) {
 73             for (var key in obj2) {
 74                 obj[key] = obj2[key];
 75                 //    确保参数唯一
 76             }
 77             return obj
 78         },
 79         setval: function (val, optitle) {
 80             var _this = this;
 81             _this.options.vals.innerText = optitle == undefined ? val : optitle;
 82             var maxleft = _this.options.max / 100 * (_this.options.line.offsetWidth - 15);  //最大px
 83             var minleft = _this.options.min / 100 * (_this.options.line.offsetWidth - 15);  //最小px
 84             var theoryleft = val / 100 * (_this.options.line.offsetWidth - 15);   //理论px
 85             if (theoryleft > maxleft) {
 86                 theoryleft = maxleft;
 87             }
 88             else if (theoryleft < minleft) {
 89                 theoryleft = minleft;
 90             }
 91             //设置点的位置
 92             //_this.options.minDiv.style.left = val / 100 * (_this.options.line.offsetWidth - 15) + "px";
 93             _this.options.minDiv.style.left = theoryleft + "px";
 94             //设置中间线的颜色
 95             setColor(_this.options.line);
 96         },
 97         settitle: function (optitle) {
 98             var _this = this;
 99             _this.options.vals.innerText = optitle;
100         },
101         setmin: function (val) {
102             var _this = this;
103             _this.options.min = val;
104             _this.options.line.setAttribute('attr_min', val);
105         },
106         setmax: function (val) {
107             var _this = this;
108             _this.options.max = val;
109             _this.options.line.setAttribute('attr_max', val);
110         },
111         prodrop: function (isshow) {
112             if (isshow) {
113                 this.options.minDiv.addEventListener("touchstart", start);
114                 this.options.minDiv.addEventListener("mousedown", start);
115             }
116             else {
117                 this.options.minDiv.removeEventListener("touchstart", start);
118                 this.options.minDiv.removeEventListener("mousedown", start);
119             }
120         },
121         showtip: function (isshow) {
122             if (isshow) {
123                 this.options.vals.style.display = "block";
124             }
125             else {
126                 this.options.vals.style.display = "none";
127             }
128         }
129     }
130     //暴露对象
131     window.supslider = demo;
132     //拖动
133     window.addEventListener("touchmove", move);
134     window.addEventListener("mousemove", move);
135     //鼠标松开
136     window.addEventListener("touchend", end);
137     window.addEventListener("mouseup", end);
138 
139     //获取元素的绝对位置
140     function getPosition(node) {
141         var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
142         var top = node.offsetTop;
143         var current = node.offsetParent; // 取得元素的offsetParent
144         // 一直循环直到根元素
145 
146         while (current != null) {
147             left += current.offsetLeft;
148             top += current.offsetTop;
149             current = current.offsetParent;
150         }
151         return {
152             "left": left,
153             "top": top
154         };
155     }
156 
157     //设置中间线的颜色
158     function setColor(line) {
159         var pointL = line.children[1].style.left != "" ? parseFloat(line.children[1].style.left.substr(0, line.children[1].style.left.indexOf("px"))) : 0;
160         var pointR = line.children[2].style.left != "" ? parseFloat(line.children[2].style.left.substr(0, line.children[2].style.left.indexOf("px"))) : 0;
161         var lineHLeft = pointL > pointR ? pointR : pointL;
162         var lineHWidth = pointL > pointR ? (pointL - pointR) : (pointR - pointL);
163         line.children[0].style.left = lineHLeft + "px";
164         line.children[0].style.width = lineHWidth + "px";
165     }
166 }());

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7     <title>鼠标拖动小方块</title>
  8     <style type="text/css">
  9         .lineDiv {
 10             position: relative;
 11             height: 3px;
 12             background: #bfbfbf;
 13             width: 300px;
 14             margin: 50px auto;
 15         }
 16 
 17             .lineDiv .minDiv {
 18                 /*position: absolute;
 19                 top: -5px;
 20                 left: 0;
 21                  15px;
 22                 height: 15px;
 23                 background: green;
 24                 cursor: pointer;*/
 25                 position: absolute;
 26                 top: -8px;
 27                 left: 0;
 28                 width: 12px;
 29                 height: 12px;
 30                 background: #ffffff;
 31                 cursor: pointer;
 32                 border-radius: 15px;
 33                 border: 3px solid rgb(0, 150, 136);
 34             }
 35 
 36                 .lineDiv .minDiv .vals {
 37                     position: absolute;
 38                     font-size: 20px;
 39                     top: -45px;
 40                     left: -10px;
 41                     width: auto;
 42                     height: 35px;
 43                     line-height: 35px;
 44                     text-align: center;
 45                     background: #ccc;
 46                 }
 47 
 48                     .lineDiv .minDiv .vals:after {
 49                         content: "";
 50                         width: 0px;
 51                         height: 0px;
 52                         border-top: 6px solid blue;
 53                         border-left: 6px solid transparent;
 54                         border-right: 6px solid transparent;
 55                         border-bottom: 6px solid transparent;
 56                         display: block;
 57                         margin-left: 11px;
 58                     }
 59 
 60         .layui-slider-tips {
 61             position: absolute;
 62             top: -42px;
 63             z-index: 66666666;
 64             white-space: nowrap;
 65             display: none;
 66             -webkit-transform: translateX(-50%);
 67             transform: translateX(-50%);
 68             color: #FFF;
 69             background: #000;
 70             border-radius: 3px;
 71             height: 25px;
 72             line-height: 25px;
 73             padding: 0 10px;
 74             left: 50%;
 75             display: block;
 76         }
 77 
 78             .layui-slider-tips:after {
 79                 content: '';
 80                 position: absolute;
 81                 bottom: -12px;
 82                 left: 50%;
 83                 margin-left: -6px;
 84                 width: 0;
 85                 height: 0;
 86                 border-width: 6px;
 87                 border-style: solid;
 88                 border-color: #000 transparent transparent;
 89             }
 90 
 91         .layui-slider-bar {
 92             background: rgb(0, 150, 136);
 93             border-radius: 3px;
 94             position: absolute;
 95             height: 100%;
 96         }
 97     </style>
 98 </head>
 99 
100 <body>
101     <center>
102         @*<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>*@
103     </center>
104     <div id="lineDiv1" class="lineDiv">
105         <div class="layui-slider-bar"></div>
106         <div id="minDiv11" class="minDiv">
107             <div class="layui-slider-tips">0</div>
108         </div>
109         <div id="minDiv12" class="minDiv">
110             <div class="layui-slider-tips">0</div>
111         </div>
112     </div>
113     <div id="lineDiv2" class="lineDiv">
114         <div class="layui-slider-bar"></div>
115         <div id="minDiv21" class="minDiv">
116             <div class="layui-slider-tips">0</div>
117         </div>
118         <div id="minDiv22" class="minDiv">
119             <div class="layui-slider-tips">0</div>
120         </div>
121     </div>
122     <div>
123         <input value="设置50" id="setvalue" onclick="setValue(50)" type="button" />
124         <input value="设置70" id="setvalue" onclick="setValue(70,'20191010')" type="button" />
125         <input value="设置最小20" id="setvalue" onclick="setMin(20)" type="button" />
126         <input value="设置最大50" id="setvalue" onclick="setMax(50)" type="button" />
127         <input value="设置tip" id="setvalue" onclick="setTitle('新tip123~~~')" type="button" />
128         <input value="开启拖拽" id="setvalue" onclick="proDrop(true)" type="button" />
129         <input value="禁止拖拽" id="setvalue" onclick="proDrop(false)" type="button" />
130         <input value="显示tip" id="setvalue" onclick="showTip(true)" type="button" />
131         <input value="隐藏tip" id="setvalue" onclick="showTip(false)" type="button" />
132     </div>
133     <script src="~/scripts/SupSlider.js"></script>
134     <script>
135         function setValue(val, title) {
136             minDiv11.setval(val, title);
137         }
138         function setMin(val) {
139             minDiv11.setmin(val);
140         }
141         function setMax(val) {
142             minDiv11.setmax(val);
143         }
144         function setTitle(val) {
145             minDiv11.settitle(val);
146         }
147         function proDrop(isshow) {
148             minDiv11.prodrop(isshow);
149             minDiv12.prodrop(isshow);
150         }
151         function showTip(isshow) {
152             minDiv11.showtip(isshow);
153             minDiv12.showtip(isshow);
154         }
155         var minDiv11;
156         var minDiv12;
157         var minDiv21;
158         var minDiv22;
159         window.onload = function () {
160             minDiv11 = supslider({ "minDiv": document.getElementById('minDiv11') });
161             minDiv12 = supslider({ "minDiv": document.getElementById('minDiv12') });
162             minDiv21 = supslider({ "minDiv": document.getElementById('minDiv21') });
163             minDiv22 = supslider({ "minDiv": document.getElementById('minDiv22') });
164         }
165     </script>
166 </body>
167 
168 </html>

js 滑块 slider 支持PC和移动端 制作甘特图用

js 滑块 slider 支持PC和移动端制作甘特图用