码迷,mamicode.com
首页 > Web开发 > 详细

jQuery的自定义事件——滚轮

时间:2016-10-29 22:05:02      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:code   function   对象   tail   min   滚动   jquer   滚轮   trigger   

这个案例类似于在地图上滚动滚轮,能缩小或者放大地图,分别用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的自定义事件——滚轮

标签:code   function   对象   tail   min   滚动   jquer   滚轮   trigger   

原文地址:http://www.cnblogs.com/hcy1996/p/6011808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!