jQuery的自定义事件——滚轮
这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用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的自定义事件——滚轮的更多相关文章
- jquery的自定义事件通过on绑定trigger触发
jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字 ...
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- jQuery 的自定义事件
jQuery 中,想要自动触发自定义事件,必须满足2个条件: 1.事件必须是通过on 来绑定的. 2.事件必须是通过trigger / triggerHandler 来触发. 格式如下: $(fun ...
- 跟着《beginning jquery》学写slider插件并借助自定义事件改进它
<beginning jquery>是一本很不错的学习jquery的书,作者的讲解深入浅出,很适合初学者,在最后一章里面,作者把前面所有的点结合起来完成了一个轮播图的jquery插件.实现 ...
- Jquery精妙的自定义事件
对于jQuery自定义事件,很多JavaScript开发者都会有所疑惑:在日常开发过程中会不会用到呢?而本文将结合一个开发案例,其中的一些地方应用到了jQuery的自定义事件,而且达到了很好的效果-精 ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- Jquery中的事件命名机制
来源:aitangyong的专栏 JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件.JQuery支持自定义事件,这显 ...
- jQuery 自定义事件的学习笔记
jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件 代码如下 复制代码 ...
随机推荐
- LINQ之路系列
Life a Poem http://www.cnblogs.com/lifepoem/archive/2011/11/22/2258830.html
- 引用的时候js不能使用虚拟路劲,调试时用排除法测试
今天碰到2个问题,搞了半天都没明白,又不报错: 就是js的问题:-->我返回了一个json,返回的json是正确的,但是view页面接受不到这个虚拟对象. 完全懵了,不知道为什么view页面接受 ...
- socket基本操作
我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...
- The new Portable Class Library for SQLite z
Microsoft Open Technologies has recently released a Portable Class Library for SQLite. Thanks to it, ...
- 重温delphi之:如何将Bitmap位图与base64字符串相互转换
先引用delphi自带的单元 uses EncdDecd; 然后就可以使用下面二个函数了: by 菩提树下的杨过 http://yjmyzz.cnblogs.com/ ///将Bitmap位图转化为b ...
- 2014 多校联合训练赛6 Fighting the Landlords
本场比赛的三个水题之一,题意是两个玩家每人都持有一手牌,问第一个玩家是否有一种出牌方法使得在第一回和对方无牌可出.直接模拟即可,注意一次出完的情况,一开始没主意,wa了一发. #include< ...
- Oracle学习网址
Oracle Error Search: http://www.ora-error.com/ Oracle Database Error Message - Oracle Documentation: ...
- 【转】vnc centos
原文:http://www.cnblogs.com/niocai/archive/2011/11/02/2233332.html 我的CentOS版本是6.0,下述方法在i386和x86_64中均适用 ...
- 第一章:绪论-Python开发工具的安装
书中提到了操作系统平台尽量选 *nix.我这里选用的是 ubuntu 14.04 , 下面的操作均以此操作系统为例说明. 操作系统安装教程可以去网站上找,推荐用虚拟机的方式,Windows下可用的虚拟 ...
- VB.Net中点击按钮(Button)会重复提交两次表单
在VB.NET程序开发过程中遇到一个问题 提交一个表单时,button的html代码如下 <asp:Button ID="btnSubmit" OnClick="c ...