首先需要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. STM32 microcontroller system memory boot mode

    The bootloader is stored in the internal boot ROM memory (system memory) of STM32 devices. It is pro ...

  2. svn 迁移到 git 仓库并保留 commit 历史记录

    1.svn 转换为 git(会提示,让你输入先前 svn 的账号与密码) # 切换至 本地项目目录 cd /Users/jianbao/PhpStormProjects/fiisoo/ # 克隆 sv ...

  3. Golang Vendor 包管理工具 glide 使用教程

    Glide 是 Golang 的 Vendor 包管理器,方便你管理 vendor 和 verdor 包.类似 Java 的 Maven,PHP 的 Composer. Github:https:// ...

  4. ARM 编程平台+coresight

    http://www.keil.com/product/ DS-5:http://www.cnblogs.com/njseu/p/6023081.html http://www.arm.com/pro ...

  5. WebLogic使用总结(四)——WebLogic部署Web应用

    一.打包Web应用 首先将要部署到WebLogic的Web应用打包成war包,具体操作步骤如下图所示: 选中要打包的[oams]项目→[Export...]

  6. mybatis中的updateByExampleSelective方法怎么使用

    mybatis中的updateByExampleSelective方法怎么使用.sendDetailMapper.updateByExampleSelective(sendDetail, m);参数m ...

  7. UIView 的旋转和缩放

    原文地址:http://www.cnblogs.com/gaoxiao228/archive/2012/05/04/2483577.html label.transform = CGAffineTra ...

  8. Blocks Programming Topics

    最近的工作中比较频繁的用到了Block,不在是以前当做函数指针的替代或者某些API只有Blocks形式的接口才不得已用之了,发现自己对其了解还是太浅,特别是变量的生存期,按惯例还是翻译官方文档,原文链 ...

  9. oracle监听1067错误的处理

    一,oracle监听1067错误的处理修改oracle安装目录D:\DataBase\oracle\product\10.1.0\Db_1\NETWORK\ADMIN\下的 listener.ora和 ...

  10. 【Gitlab】从Gitlab拉取项目+往Gitlab发布项目 【GitLab自定义端口】

    1>GIt需要提前安装在本地,本机,自己的电脑,开发环境电脑,IDEA所在的电脑 2>代码仓库:gitlab 3>开发工具:IDEA 4>内网搭建gitlab,访问url: h ...