这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用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. 在ASP.NET MVC中使用DropDownList

    在ASP.NET MVC中,尽管我们可以直接在页面中编写HTML控件,并绑定控件的属性,但更方便的办法还是使用HtmlHelper中的辅助方法.在View中,包含一个类型为HtmlHelper的属性H ...

  2. dojo(五):Dijit-基本组件

    转自:http://blog.csdn.net/trendgrucee/article/details/12679949 1.简介 Dijit是Dojo的UI框架,包含一系列丰富的组件以帮助你快速开发 ...

  3. Java开源项目(备查)

    转自:http://www.blogjava.net/Carter0618/archive/2008/08/11/221222.html Spring Framework  [Java开源 J2EE框 ...

  4. 关于SQL中的Update语句

    今天在SQL数据库操作时需要将一张表中的数据Update到另一张表中去, 可是用我以往的写法确怎么也不能成功.代码如下: update table1 a set a.Col1=b.Col2 from ...

  5. memcache 存储单个KEY,数据量过大的时候性能慢!以及简单的memcache不适合用到的场景

    今天有人问到我:memcache存储大数据量,10K,100K,1M的时候,效果怎么样??我回答:不好,效果非常慢.对方问:为什么啊??我回答不上来...于是就找了点资料. memcached使用需要 ...

  6. 【JMeter】JMeter在linux下运行

    之前在用JMeter做性能测试时基本都用自己的笔记本电脑. 考虑到网络传输和占用系统资源情况时进行了以下分析: 1 在笔记本上,开始-cmd "ping 服务器",得到传输时间.在 ...

  7. Uva 315 Network 判断割点

    模板题,注意输出 #include <stdio.h> #include <string.h> #include <algorithm> #include < ...

  8. HDU4614 Vases and Flowers 二分+线段树

    分析:感觉一看就是二分+线段树,没啥好想的,唯一注意,当开始摆花时,注意和最多能放的比大小 #include<iostream> #include<cmath> #includ ...

  9. java Object类学习

    /* * Copyright (c) 1994, 2010, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...

  10. BNUOJ-29365 Join in tasks 简单数学

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29365 首先排序,然后维护一个后缀,等差求下和就可以了.. //STATUS:C++_AC ...