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來主動觸發。