jq 选项菜单、滑动条鼠标滚轮切换选定数据
选项菜单、滑动条鼠标滚轮切换选定数据：
（本函数基于jQuery框架，需引入后再使用）
链接：
https://pan.baidu.com/s/1VXbJmGxP9FPYS0MLlI6BoQ
提取码：65du
语法：
mousewheel_Change (ele, max, min, step, mode)
参数：
<ele> 控制的元素（必要）
this：指代此dom元素对象。具体值 | $(具体值)：以#开头的ID或以.开头的class。- 类如
document.getElementById()document.querySelector()：获取控制元素的dom并传递值。
<max> 最大索引数
空 | "auto"：自动获取。具体数值："input"时范围在0-100的最大索引数，"select"时范围在总数之间（负值为倒数）。
<min> 最小索引数
空 | "auto"：自动获取。具体数值："input"时范围在0-100的最小索引数，"select"时范围在总数之间（负值为倒数）。
<step> 提升数值
空 | "auto"：自动获取。具体数值：范围在最小至最大索引数区间，正值时滚轮向上为减，向下为加，负值时方向相反。
<mode> 执行模式
空 | "auto"：默认同时执行。"select"：只执行选项菜单。"input"：只执行滚动条。
兼容性：
- Chrome, Firefox, Opera, Safari, Edge, IE 10 及以上 ：全兼容
- IE 9：仅兼容选项菜单
- IE 9 以下：不兼容
函数：
function mousewheel_Change(ele, max, min, step, mode) {
var ele = $(ele), e = event || window.event, w, tag1, tag2, layer;
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
e.wheelDelta ? w = e.wheelDelta : (e.detail ? w = e.detail : false);
if (mode == "select") {
tag1 = ele.is("select"), tag2 = ele.find("select").length > 0;
}
else if (mode == "input") {
tag1 = ele.is("input[type=range]"), tag2 = ele.find("input[type=range]").length > 0;
}
else if (!mode || mode == "auto") {
tag1 = (ele.is("select") || ele.is("input[type=range]"));
tag2 = (ele.find("select").length > 0 || ele.find("input[type=range]").length > 0);
}
if (tag1) layer = 1; else if (tag2) layer = 2; else return;
var changeFN = function(mo, el) {
var cFN = function(t) {
if (mo == "select") {
el.find("option").eq(t).prop("selected",true); el.change(); }
else if (mo == "input") {
el.prop("value", t); el.change(); }
}
var getInfo = function(val, re) {
if (mo == "select") {
if (val == "value") re = el.get(0).selectedIndex;
else if (val == "step") {
if ((!step && step!==0) || step == "auto") re = 1; else re = step; }
else if (val == "min") {
if (!min || min == "auto") re = 1;
else re = min > 0 ? min : el.find("option").length + min + 1;
}
else if (val == "max") {
if ((!max && max!==0) || max == "auto") re = el.find("option").length;
else re = max > 0 ? max : el.find("option").length + max + 1;
}
} else if (mo == "input") {
var getRange = function(val1, val2, def) {
if ((!val1 && val1!==0) || val1 == "auto") {
if (!el.prop(val2)) return def;
else return Number(el.prop(val2));
}
else return val1;
}
if (val == "value") re = Number(el.prop("value"));
else if (val == "step") {
if (step === 0) re = 0;
else {
re = getRange(step, "step", 1);
if (getRange(max, "max", 100) > 100) re = Math.ceil(re/max*100);
}
}
else if (val == "min") {
re = getRange(min, "min", 0); if (re < 0) re = 0;
}
else if (val == "max") {
var mma = getRange(max, "max", 100);
if (step === 0) re = mma > 100 ? 100 : mma;
else {
var ms = Math.abs(getRange(step, "step", 1));
var mmi = getRange(min, "min", 0);
if (mmi < 0) mmi = 0;
if (mma > 100) mma = 100, ms = Math.ceil(ms/max*100);
re = Math.floor((mma-mmi)/ms)*ms+mmi;
}
}
}
return re;
}
var v = getInfo("value"), s = getInfo("step"), mi = getInfo("min"), ma = getInfo("max");
if (s != 0) {
if (s < 0) s = -s, w = -w;
if (w > 0) {
if (mo == "select" && v != mi-1) {
if (v-s > mi - 2) cFN(v-s); else cFN(mi-1);
} else if (mo == "input" && v != mi) {
if (v-s >= mi) cFN(v-s); else cFN(mi);
}
} else if (w < 0) {
if (mo == "select" && v != ma-1) {
if (v+s < ma) cFN(v+s); else cFN(ma-1);
} else if (mo == "input" && v != ma) {
if (v+s <= ma) cFN(v+s); else cFN(ma);
}
}
}
}
if (mode == "select" || mode == "input") {
if (layer == 2) ele.find(mode == "input" ? "input[type=range]" : mode).each(function() {
changeFN(mode, $(this));});
else changeFN(mode, ele);
} else if (!mode || mode == "auto") {
if (layer == 2) {
var eachFN = function(m1, m2) {
ele.find(m2 ? m2 : m1).each(function() {
changeFN(m1, $(this));});}
if (ele.find("select")) eachFN("select");
if (ele.find("input[type=range]")) eachFN("input", "input[type=range]");
} else {
changeFN(ele.is("select") ? "select" : (ele.is("input[type=range]") ? "input" : mode), ele);
}
}
}
示例：
<html><head><meta charset="utf-8">
<style>
html, body {
margin: 0;
}
#wheelEle {
margin: 3% 0 0 5%;
min-width: 40%;
float:left;
}
#wheelEle > input, #wheelEle > select, #divEle{
display: block;
margin: 2em;
}
#consoleEle {
max-width: 49%;
height: 92%;
margin: 3% 0 0 5%;
float: left;
overflow: hidden;
}
#consoleEle > div {
margin-top: 1em;
max-height: calc(100% - 3em);
overflow: auto;
}
#console {
line-height: 160%;
white-space: nowrap;
font-family: monospace;
}
style>head><body>
<div id="wheelEle">
Range-1 : (step = 1 ; min = 10 ; max = 80)
<input id="ran-1" type="range" onmousewheel="mousewheel_Change('#ran-1', 80, 10, 1, 'input')" />
Range-2 : (step = 7 ; min = 3 ; max = 70)
<input id="ran-2" type="range" step="7" min="3" max="70" onmousewheel="mousewheel_Change(document.getElementById('ran-2'))" />
Range-3 : (step = -5 ; min = 4 ; max = 90)
<input id="ran-3" type="range" min="0" max="100" onmousewheel="mousewheel_Change(this, 90, 4, -5)" />
Select-1 : (length = 20 ; step = 2 ; min = 3 ; max = 18)
<select id="sel-1" class="sel-A" onmousewheel="mousewheel_Change('.sel-A', 18, 3, 2, 'select')">
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
<option>6option>
<option>7option>
<option>8option>
<option>9option>
<option>10option>
<option>11option>
<option>12option>
<option>13option>
<option>14option>
<option>15option>
<option>16option>
<option>17option>
<option>18option>
<option>19option>
<option>20option>
select>
Select-2 : (length = 15 ; step = -1 ; min = 2 ; max = -2(+10+1=9))
<select id="sel-2" class="sel-B" onmousewheel="mousewheel_Change(this, -2, 2, -1)">
<option>01option>
<option>02option>
<option>03option>
<option>04option>
<option>05option>
<option>06option>
<option>07option>
<option>08option>
<option>09option>
<option>10option>
select>
Div :
<div id="divEle" onmousewheel="mousewheel_Change(this)">
<input id="div-ran" type="range" step="1" min="1" max="50" value="10" />
<select id="div-sel_1">
<option>01option>
<option>02option>
<option>03option>
<option>04option>
<option>05option>
<option>06option>
<option>07option>
<option>08option>
<option>09option>
<option>10option>
<option>11option>
<option>12option>
<option>13option>
<option>14option>
<option>15option>
select>
<select id="div-sel_2">
<option>Aoption>
<option>Boption>
<option>Coption>
<option>Doption>
<option>Eoption>
<option>Foption>
<option>Goption>
select>
div>
div>
<div id="consoleEle">
Console :
<div><span id="console">span>div>
div>
<script src="jquery.js">script>
<script>
$("input, select").on("change", function() {
$("#console").html(this.id+" : "+this.value+" "+$("#console").html());
console.log(this.id + " : " +this.value);
});
$("input, select").on("keyup", function(event) {
var k = event.which || event.keyCode;
if (k>=37 && k<=40) {
window.Kcons = window.Kcons ? window.Kcons + 1 : 1;
$("#console").html("
Keyboard "+window.Kcons+" : "+$("#console").html());
}
});
$("input, select").on("click", function() {
window.Mcons = window.Mcons ? window.Mcons + 1 : 1;
$("#console").html("
Move "+window.Mcons+" : "+$("#console").html());
});
function wheelCons() {
window.Wcons = window.Wcons ? window.Wcons + 1 : 1;
$("#console").html("
Wheel "+window.Wcons+" : "+$("#console").html());
}
function mousewheel_Change(ele, max, min, step, mode) {
// original code
wheelCons();
}
script>
body>html>