console 命令行工具 X clear

console

function change_img1(x) {
    SF.wheel(event, x)
}

var SF = (function () {
    var wheel = function wheel(event, x) {
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;
        } else if (event.detail) {
            delta = -event.detail / 3;
        }
        if (delta)
            handle(delta, x);
    };

    function handle(delta, x) {
        var s = delta + ": ";
        if (delta < 0) {
            x.width = x.width - 10;
            x.height = x.height - 10;
            if (x.width < 60 || x.height < 60) {
                x.height = 60;
                x.width = 60;
            } else {
                x.width = x.width - 10;
                x.height = x.height - 10;
            }
        } else {
            x.width = x.width + 10;
            x.height = x.height + 10;
            if (x.width > 1000 || x.height > 1000) {
                x.height = 60;
                x.width = 60;
            } else {
                x.width = x.width + 10;
                x.height = x.height + 10;
            }
        }
    }

    if (window.addEventListener)
        window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;
    return {wheel: wheel}
})();

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鼠标滚轮控制图片大小</title>
</head>
<body>
<h1>转动鼠标滚轮改变图片大小</h1>
<img height="60" width="60" src="https://raw.githubusercontent.com/gzwawj/html-css-js/master/roller/img/app.jpg" alt="" onmousewheel="change_img1(this)">
</body>
<script src="js/app.js"></script>
</html>