Question

我在下面写了html代码来显示全屏图像。由于我的图像有时非常大，我希望能够放大并查看细节。我在这里找到了这个JavaScript代码http://www.jacklmoore.com/wheelzoom/。它工作得很好，但我想防止无限放大。我需要它受到图像大小的限制。如何修改代码来做到这一点？感谢。

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Zoom</title>
<style>
html, body {
    background:#333333;
    height: 100%;
    margin: 0;
    padding: 0;
}
#image {
    padding: 0;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}
</style>
</head>
<body>
    <img class='zoom' src='MyImage.jpg' id='image'/>
    <script src="wheelzoom.js"></script>
    <script>
    wheelzoom(document.querySelector('img.zoom'));
    </script>
</body>
</html>

的JavaScript

/*!
    Wheelzoom 3.0.4
    license: MIT
    http://www.jacklmoore.com/wheelzoom
*/
window.wheelzoom = (function(){
    var defaults = {
        zoom: 0.10
    };

    var canvas = document.createElement('canvas');

    var main = function(img, options){
        if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }

        var settings = {};
        var width;
        var height;
        var bgWidth;
        var bgHeight;
        var bgPosX;
        var bgPosY;
        var previousEvent;
        var cachedDataUrl;

        function setSrcToBackground(img) {
            img.style.backgroundImage = 'url("'+img.src+'")';
            img.style.backgroundRepeat = 'no-repeat';
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            cachedDataUrl = canvas.toDataURL();
            img.src = cachedDataUrl;
        }

        function updateBgStyle() {
            if (bgPosX > 0) {
                bgPosX = 0;
            } else if (bgPosX < width - bgWidth) {
                bgPosX = width - bgWidth;
            }

            if (bgPosY > 0) {
                bgPosY = 0;
            } else if (bgPosY < height - bgHeight) {
                bgPosY = height - bgHeight;
            }

            img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
            img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
        }

        function reset() {
            bgWidth = width;
            bgHeight = height;
            bgPosX = bgPosY = 0;
            updateBgStyle();
        }

        function onwheel(e) {
            var deltaY = 0;

            e.preventDefault();

            if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
                deltaY = e.deltaY;
            } else if (e.wheelDelta) {
                deltaY = -e.wheelDelta;
            }

            // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
            // We have to calculate the target element's position relative to the document, and subtrack that from the
            // cursor's position relative to the document.
            var rect = img.getBoundingClientRect();
            var offsetX = e.pageX - rect.left - window.pageXOffset;
            var offsetY = e.pageY - rect.top - window.pageYOffset;

            // Record the offset between the bg edge and cursor:
            var bgCursorX = offsetX - bgPosX;
            var bgCursorY = offsetY - bgPosY;

            // Use the previous offset to get the percent offset between the bg edge and cursor:
            var bgRatioX = bgCursorX/bgWidth;
            var bgRatioY = bgCursorY/bgHeight;

            // Update the bg size:
            if (deltaY < 0) {
                bgWidth += bgWidth*settings.zoom;
                bgHeight += bgHeight*settings.zoom;
            } else {
                bgWidth -= bgWidth*settings.zoom;
                bgHeight -= bgHeight*settings.zoom;
            }

            // Take the percent offset and apply it to the new size:
            bgPosX = offsetX - (bgWidth * bgRatioX);
            bgPosY = offsetY - (bgHeight * bgRatioY);

            // Prevent zooming out beyond the starting size
            if (bgWidth <= width || bgHeight <= height) {
                reset();
            } else {
                updateBgStyle();
            }
        }

        function drag(e) {
            e.preventDefault();
            bgPosX += (e.pageX - previousEvent.pageX);
            bgPosY += (e.pageY - previousEvent.pageY);
            previousEvent = e;
            updateBgStyle();
        }

        function removeDrag() {
            document.removeEventListener('mouseup', removeDrag);
            document.removeEventListener('mousemove', drag);
        }

        // Make the background draggable
        function draggable(e) {
            e.preventDefault();
            previousEvent = e;
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', removeDrag);
        }

        function load() {
            if (img.src === cachedDataUrl) return;

            var computedStyle = window.getComputedStyle(img, null);

            width = parseInt(computedStyle.width, 10);
            height = parseInt(computedStyle.height, 10);
            bgWidth = width;
            bgHeight = height;
            bgPosX = 0;
            bgPosY = 0;

            setSrcToBackground(img);

            img.style.backgroundSize =  width+'px '+height+'px';
            img.style.backgroundPosition = '0 0';
            img.addEventListener('wheelzoom.reset', reset);

            img.addEventListener('wheel', onwheel);
            img.addEventListener('mousedown', draggable);
        }

        var destroy = function (originalProperties) {
            img.removeEventListener('wheelzoom.destroy', destroy);
            img.removeEventListener('wheelzoom.reset', reset);
            img.removeEventListener('load', load);
            img.removeEventListener('mouseup', removeDrag);
            img.removeEventListener('mousemove', drag);
            img.removeEventListener('mousedown', draggable);
            img.removeEventListener('wheel', onwheel);

            img.style.backgroundImage = originalProperties.backgroundImage;
            img.style.backgroundRepeat = originalProperties.backgroundRepeat;
            img.src = originalProperties.src;
        }.bind(null, {
            backgroundImage: img.style.backgroundImage,
            backgroundRepeat: img.style.backgroundRepeat,
            src: img.src
        });

        img.addEventListener('wheelzoom.destroy', destroy);

        options = options || {};

        Object.keys(defaults).forEach(function(key){
            settings[key] = options[key] !== undefined ? options[key] : defaults[key];
        });

        if (img.complete) {
            load();
        }

        img.addEventListener('load', load);
    };

    // Do nothing in IE8
    if (typeof window.getComputedStyle !== 'function') {
        return function(elements) {
            return elements;
        };
    } else {
        return function(elements, options) {
            if (elements && elements.length) {
                Array.prototype.forEach.call(elements, main, options);
            } else if (elements && elements.nodeName) {
                main(elements, options);
            }
            return elements;
        };
    }
}());

Answer 1

寻找

Select
  C.ID
 ,C.CID
 ,Case C.CID
   When 1  then 'Y'
   When 26 then 'Y'
   When 33 then 'Y'
   When 49 then 'Y'
   Else 'N'
  End as "Keep"
 ,Case C.CID
   When 38 then 'Y'
   When 46 then 'Y'
   When 67 then 'Y'
   Else 'N'
  End as "Remove"

 Into #Temp

 From CTE as C



 Select Distinct
   T.ID

 From #Temp as T

Group by T.ID

Having
  Sum(Case When T.Keep = 'Y' Then 1 Else 0 End) = 4
  and
  Sum(Case When T.Remove = 'Y' then 1 Else 0 End) = 0

并改为

if (deltaY < 0) {
    bgWidth += bgWidth*settings.zoom;
    bgHeight += bgHeight*settings.zoom;

你也应该引用html head标签中的javascript文件

如何修改此JavaScript代码以防止无限制放大

1 个答案: