这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用zoomIn和zoomOut来命名。

代码如下:

//JS部分:
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('img').on('zoomIn', function(){
$(this).css('width', 300)
}); $('img').on('zoomOut', function(){
$(this).css('width', 800)
}); //DOMMouseScroll事件,监听滚轮
$('img').on('DOMMouseScroll',function(ev){
//originalEvent,jQuery中API,可获得原生js中的event对象
if(ev.originalEvent.detail > 0){
$(this).trigger('zoomIn');
}else{
$(this).trigger('zoomOut');
}
})
})
</script>
  
//HTML部分:     <img src="beiyong/1.jpeg"/>

另外,detail在滚轮事件中,向上滚——放大(detail == -3),触发zoomOut;向下滚——缩小(detail == 3),触发zoomIn。

自定义事件需要trigger来主动触发。

jQuery的自定义事件——滚轮的更多相关文章

  1. jquery的自定义事件通过on绑定trigger触发

    jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...

  2. jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

    jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...

  3. jQuery 的自定义事件

    jQuery  中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...

  4. 跟着《beginning jquery》学写slider插件并借助自定义事件改进它

    <beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...

  5. Jquery精妙的自定义事件

    对于jQuery自定义事件,很多JavaScript开发者都会有所疑惑:在日常开发过程中会不会用到呢?而本文将结合一个开发案例,其中的一些地方应用到了jQuery的自定义事件,而且达到了很好的效果-精 ...

  6. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  7. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  8. Jquery中的事件命名机制

    来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...

  9. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

随机推荐

  1. GIS:揭开你神秘的面纱

    转自:http://www.cnblogs.com/gisangela/archive/2013/02/20/2918884.html#!comments GIS从出现到为人所知,只不过经历了短短的几 ...

  2. UVA 10600 ACM Contest and Blackout 次小生成树

    又是求次小生成树,就是求出最小生成树,然后枚举不在最小生成树上的每条边,求出包含着条边的最小生成树,然后取一个最小的 #include <iostream> #include <al ...

  3. [JDBC-2] JDBC CURD

    package com.amuos.jdbc.curd; import java.sql.Connection; import java.sql.ResultSet; import java.sql. ...

  4. Zabbix探索:网络设备监控1

    近期需要大量添加网络设备,为了避免以后在节点100上出现问题,所以特地申请了一台虚拟机,用作代理110. 虽然Zabbix模板中的英文很简单,但是为了同事着想,还是将大部分内容汉化了,避免今后说理解不 ...

  5. 使用 cloc 统计代码行数

    可能大家都知道用 `wc -l` 命令进行代码行数统计,但是它会将代码中的注释.空行所占用的文本行都统计在内.如果想查看一个 tar 包或一个项目目录中“实际”的代码行数并且不愿意自己去写一个脚本来做 ...

  6. Bzoj 4591: [Shoi2015]超能粒子炮·改 数论,Lucas定理,排列组合

    4591: [Shoi2015]超能粒子炮·改 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 178  Solved: 70[Submit][Stat ...

  7. android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值

    1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值  env->SetBooleanF ...

  8. mysql 处理中文乱码问题

    CREATE TABLE tbl_score( `ID` INT NOT NULL, `score` DEC(,) NOT NULL, `subject` VARCHAR() NOT NULL ); ...

  9. 编译vo-aacenc遇到的问题

    sourceforge更新了vo-aacenc到0.1.3,就把自己的编码器也更新到最新.编译过程中无聊多测试了一下 发现一个小问题http://sourceforge.net/projects/op ...

  10. 28个你必须知道的HTML5的新特性,技巧以及技术

    原文地址:http://adamlu.com/?p=584#header 总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式 ...