鼠标上下滚动支持combobox选中

首先需要jquery插件来支持:

1、代码SVN检出https://github.com/jquery/jquery-mousewheel

2、点击这里下载jquery.mousewheel.zip

3、直接上代码

 $('#text1').combobox({
        height: 32,
        data: [

            {"value": "选项1", "text": "选项1"},

            {"value": "选项2", "text": "选项2"},

            {"value": "选项3", "text": "选项3"},

            {"value": "选项4", "text": "选项4"},

            {"value": "选项5", "text": "选项5"},

            {"value": "选项6", "text": "选项6"},

            {"value": "选项7", "text": "选项7"},

            {"value": "选项8", "text": "选项8"},

            {"value": "选项9", "text": "选项9"},

            {"value": "选项10", "text": "选项10"}
        ]
        ,
        onShowPanel: function () {
            var data = $('#text1').combobox('getData');
            var value = $('#text1').combobox('getValue');
            var startN = 0;
            if (value != '') {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].value == value) {
                        startN = i;
                        break;
                    }
                }
            }
            var deltaY = -1;

            function setValue() {
                startN += -deltaY;
                if (startN < 0) {
                    startN = 0;
                }
                else if (startN > data.length - 1) {
                    startN = (data.length - 1);
                }
                $('#text1').combobox('select', data[startN].value);
            }

            $('#text1').combobox('panel').off('mousewheel').on('mousewheel', function (event) {
                //事件event对象中可以获取如下三个属性值:
                //deltaX:值为负的(-1),则表示滚轮向左滚动。值为正的(1),则表示滚轮向右滚动。
                //deltaY:值为负的(-1),则表示滚轮向下滚动。值为正的(1),则表示滚轮向上滚动。
                //deltaFactor:增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。
                console.log(event.deltaX, event.deltaY, event.deltaFactor);
                deltaY = event.deltaY;
                setValue();


            });

        }
    });

 下面是做好的gif动画图,很圆润,湿滑哦 哈哈 走起 吃午饭了哦!!

技术交流QQ群:15129679

原文地址:https://www.cnblogs.com/yeminglong/p/8334950.html