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 width: 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>