html+js实现按钮控制图片放大、缩小以及同时实现滑轮滚动图片放缩

今天模仿别人页面功能的时候，碰到了一个问题，就是一张图片，需要有放大按钮和缩小按钮，点击放大可以无限放大（有需要可以限制最大宽高），同时，需要在图片上监听鼠标滚轮事件，来放大和缩小图片。

按钮改变只要改变宽高其一，另一个会一起改变。

鼠标滚轮，参考下边这个链接讲的很清楚。

判断滚轮向上或向下在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±150，其中正数表示为向下，负数表示向上。

链接: [https://blog.csdn.net/qq_41756580/article/details/81179359].

来吧上代码== 代码片.

//监听鼠标滚轮，不同浏览器需要做兼容处理
<script type="text/javascript">
        var images1 = document.getElementById("images1");
        // IE9, Chrome, Safari, Opera  
        images1.addEventListener("mousewheel", MouseWheelHandler, false);//兼容处理
        // Firefox  
        images1.addEventListener("DOMMouseScroll", MouseWheelHandler, false);//兼容处理
        // images1.attachEvent("onmousewheel", MouseWheelHandler);
        function MouseWheelHandler(e) {
            // cross-browser wheel delta  
            var e = window.event || e; // old IE support  
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));//IE、Opera、Safari、Chrome  e.wheelDelta,Firefox中  e.detail  判断是向上还是向下滚动负值delta取-1 正值delta取1  
            images1.height = Math.max(300, Math.min(700, images1.height + (30 * delta)));
            return false;
        } 
 </script>

//监听放缩按钮的
 <script>
        function blowup() {
            var images1 = document.getElementById("images1");
            if (images1.height <= 700) {
                images1.height = images1.height + 20;
            }
        }
        function reduce() {
            var images1 = document.getElementById("images1");
            if (images1.height > 300) {
                images1.height = images1.height - 20;
            }
        }
        function getDefault() {
            var images1 = document.getElementById("images1");
            images1.height = 500;
        }
        function getFixed() {
            var images1 = document.getElementById("images1");
            images1.height = 450;
        }
  </script>

<div style="display:flex;flex-direction:row;justify-content: center;">
        <button id="bigger" onclick="blowup()">放大</button>
        <div id="mqp">
            <img id="images1" src="http://www.pig66.com/uploadfile/2017/0511/20170511074941292.jpg" alt="" />
        </div>
        <button id="smaller" onclick="reduce()">缩小</button>
        <button id="default" onclick="getDefault()">原图</button>
        <button id="fixed" onclick="getFixed()">固定尺寸</button>
 </div>

还有就是我不知道为什么，引入layui就不行了，请大神们指导一下，或者哪里有错请大神们指正。。。。。。