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来主动触发。

上一篇:ios 使用block中使用self可能产生的循环引用


下一篇:Python安装和开发环境搭建