首先需要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

鼠标上下滚动支持combobox选中的更多相关文章

  1. 如何让DbGrid支持鼠标滚轮滚动

    如何让DbGrid支持鼠标滚轮滚动 在主窗体上加一个ApplicationEvents控件(控件在Additional面板中), 在它的OnMessage事件中加入下述代码,一切搞定-! proced ...

  2. 纯javaScript实现元素平滑滚动,改进前两个版本,支持鼠标滚轮滚动和点击元素滚动,滚动更顺畅

    windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...

  3. 问题记录:JavaFx 鼠标滑轮滚动事件监听!

    问题描述: 在listview的item里面添加鼠标拖拽排序功能.代码如下: setOnMouseDragged(event -> { //设定鼠标长按0.3秒后才可拖拽 防止误操作 isCan ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

  6. WPF的ScrollViewer鼠标的滚动

    在C# 中,两个ScrollViewer嵌套在一起或者ScrollViewer里面嵌套一个ListBox.Listview(控件本身有scrollviewer)的时候,我们本想要的效果是鼠标滚动整个S ...

  7. jquery.datetimepicker.js 当鼠标离开时,不选中当前时间,以达到清空的目的

    validateOnBlur:true    当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法:   // 时间设置         $('#BankProduct_sale_begin'). ...

  8. Delphi - 鼠标上下滚动基础消息事件

    Delphi实现对鼠标上下滚动基础消息的截获并处理 前几天有客户提出需求:由于个人PC界面限制,有时候电子图档显示不全,希望通过鼠标上下滚动用来控制电子图档的放大和缩小. 下面通过一个测试Demo来说 ...

  9. hexo next主题深度优化(十一),next主题中加入scrollReveal.js,让文章随着鼠标的滚动,出现点小动作。

    文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...

随机推荐

  1. 网速4M等于多少KB/S,等于多少kbps

    4M=512KB/S=4096Kbps 1KB/S=8Kbps 8倍速 转:http://zhidao.baidu.com/link?url=8GAyhcY9BbVstQr8pE3I7QP_M53Km ...

  2. C程序设计的抽象思维-递归过程-砝码称重

    [问题] 在狄更斯时代,商人们用砝码和天平来称量商品的重量,假设你仅仅有几个砝码,就仅仅能精确地称出一定的重量.比如,假定仅仅有两个砝码:各自是1kg和3kg. 仅仅用1kg的砝码能够称出1kg重量的 ...

  3. DirectInfo.GetFiles返回数组的默认排序

    NTFS和CDFS下,是按照字母顺序,而FAT下,按照文件创建时间顺序 using System; using System.Collections; using System.IO; namespa ...

  4. 简述 IOS中的LazyLoad思想

    Lazy,谁懒?当然是计算机偷懒.通常用法,你有一个NSArray的property,但是你不在初始化方法里为其alloc/init,它就只是一个指针,不会占用内存.然后你写了此property的访问 ...

  5. C#+arcengine获得栅格数据的像素值(高程)

    此文问获得栅格数据的像元值(即高程),有可能部分见解不到位,望大神看到了不惜指教! /// <summary> ///  得到高程(通过像素值)         /// </summ ...

  6. java集合类——Stack栈类与Queue队列

    Stack继承Vector类,它通过五个操作对类 Vector 进行了扩展. 栈是 后进先出的. 栈提供了通常的 push 和 pop 操作,以及取堆栈顶点的 peek 方法.测试堆栈是否为空的 em ...

  7. java List集合记录 ArrayList和LinkedList的区别

    一般大家都知道ArrayList和LinkedList的大致区别:      1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.      2.对于随机访问 ...

  8. Java 8新的时间日期库的20个使用示例

    原文链接 作者:Javin Paul 译者:之诸暇 除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学 ...

  9. Mac与Mac之中的共享方式

    前往 ---> 连接服务器  ---> 输入smb://带连接的服务器地址(smb://192.168.1.40)即可

  10. 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

    文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...