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来主动触发。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步