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

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].
html+js实现按钮控制图片放大、缩小以及同时实现滑轮滚动图片放缩_第1张图片

来吧上代码== 代码片.

//监听鼠标滚轮,不同浏览器需要做兼容处理
<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就不行了,请大神们指导一下,或者哪里有错请大神们指正。。。。。。

你可能感兴趣的:(前端,html,监听鼠标滚轮事件,图片放大缩小,html,按钮放大缩小图片,鼠标滚轮滚动放缩图片)