jq 选项菜单、滑动条鼠标滚轮切换选定数据

最新推荐文章于 2024-03-21 09:57:25 发布

時陨星

最新推荐文章于 2024-03-21 09:57:25 发布

阅读量479

点赞数 2

分类专栏： javascript jQuery 文章标签： javascript jquery html

本文链接：https://blog.csdn.net/ChisameMuko/article/details/103576327

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

选项菜单、滑动条鼠标滚轮切换选定数据：

（本函数基于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>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </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>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
    </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>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
        </select>
        <select id="div-sel_2">
            <option>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
            <option>E</option>
            <option>F</option>
            <option>G</option>
        </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+"&emsp;&emsp;"+$("#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("<br><span style='color:blue'>Keyboard "+window.Kcons+" :&emsp;</span>"+$("#console").html());
        }
    });
    $("input, select").on("click", function() {
        window.Mcons = window.Mcons ? window.Mcons + 1 : 1;
        $("#console").html("<br><span style='color:green'>Move "+window.Mcons+" :&emsp;</span>"+$("#console").html());
    });
    function wheelCons() {
        window.Wcons = window.Wcons ? window.Wcons + 1 : 1;
        $("#console").html("<br><span style='color:red'>Wheel "+window.Wcons+" :&emsp;</span>"+$("#console").html());
    }

    function mousewheel_Change(ele, max, min, step, mode) {
        // original code
        wheelCons();
    }
</script>

</body></html>

時陨星

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 选项菜单、滑动条鼠标滚轮切换选定数据

选项框、滑动条鼠标滚轮切换选定数据：（本函数基于jQuery框架，需引入后再使用）语法：mousewheel_Change (id, max, min, mode)参数：<id> 控制的元素ID（必要）<max> 最大索引数空 | "auto"：自动获取。具体数值：具体的最大索引数。<min> 最小索引数空 | "auto...
复制链接

扫一扫