图片放大和缩小

鼠标滚动轮子来放大和缩小图片:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">
    <title></title>

</head>

<body>
<img src="/image/img/icon_new.png" id="img" alt=""/>

</body>

</html>

<script>


    function myBrowser() {

        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

        var isOpera = userAgent.indexOf("Opera") > -1;
        //判断是否Opera浏览器

        if (isOpera) {
            return "Opera";

        }
        //判断是否Firefox浏览器

        if (userAgent.indexOf("Firefox") > -1) {

            return "FF";

        }

        if (userAgent.indexOf("Chrome") > -1) {

            return "Chrome";

        }

        if (userAgent.indexOf("Safari") > -1) {

            return "Safari";

        }

        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

            return "IE";

        }

    }


    var i = document.getElementById("img");

    if (myBrowser() == "ff") {

        i.addEventListener("DOMMouseScroll", fun, false);

    } else {

        i.onmousewheel = fun;
        i.onclick = fun;

    }


    function fun(e) {

        var ev = e || window.event;

        var num = ev.wheelDelta || ev.detail;

        if (num > 0) {  //正数表示滚轮向上,负数表示滚轮向下

            i.style.width = i.offsetWidth * 1.2 + "px";

        } else {

            i.style.width = i.offsetWidth * 0.8 + "px";

        }

    }


</script>
原文地址:https://www.cnblogs.com/chendezhen/p/15294620.html