Question

基本上我想要做的是当我向上滚动，放大我的桌子，使其变大，当我向下滚动时，缩小桌面，使其变小。

这是js

    var mainGridW = $("#mainGrid").width();
    var mainGridH = $("#mainGrid").height();

    function setupMouseWheel(){
        if (zoomContainer.addEventListener) {
            zoomContainer.addEventListener('DOMMouseScroll', onMouseWheelSpin, false);
            zoomContainer.addEventListener('mousewheel', onMouseWheelSpin, false); // Chrome
        }else{
            zoomContainer.onmousewheel= onMouseWheelSpin;
        }
    }

    function onMouseWheelSpin(event) { 
        var nDelta = 0;
        if (!event) { event = window.event; }
        // cross-bowser handling of eventdata to boil-down delta (+1 or -1)
        if ( event.wheelDelta ) { // IE and Opera
            nDelta= event.wheelDelta;
            if ( window.opera ) {  // Opera has the values reversed
                nDelta= -nDelta;
            }
        }
        else if (event.detail) { // Mozilla FireFox
            nDelta= -event.detail;
        }
        if (nDelta > 0) {
            HandleMouseSpin( 1, event.clientX, event.clientY );
        }
        if (nDelta < 0) {
            HandleMouseSpin( -1, event.clientX, event.clientY );
        }
        if ( event.preventDefault ) {  // Mozilla FireFox
            event.preventDefault();
        }
        event.returnValue = false;  // cancel default action
    }

    function HandleMouseSpin(delta, x, y) {
        if (delta < 0){ 
            mainGridW = mainGridW/1.10;
            mainGridH = mainGridH/1.10;
            $("#mainGrid").width(mainGridW);
            $("#mainGrid").height(mainGridH);
        }
        if(delta > 0){
            mainGridW = mainGridW*1.10;
            mainGridH = mainGridH*1.10;
            $("#mainGrid").width(mainGridW);
            $("#mainGrid").height(mainGridH);
        }
    }

这是html

<body onload="setupMouseWheel();">

<div id="zoomContainer">
    <table id="mainGrid" height="100%" width="100%" cellpadding="0" cellspacing="0"></table>    
</div>

</body>

这一切都有效，除了一个问题...在Firefox中有一个滞后才会起作用。当我尝试滚动时，它表示“没有响应”几秒钟，然后在它再次开始响应后它会起作用但速度很慢。有任何想法吗？提前谢谢。

Answer 1

由于onMouseWheelSpin被重复和过快地调用，因此存在延迟。 Firefox不像Chrome，Safari那样功能强大。要解决此问题，您可以实施计时器以减少工作量。

var timer;
function onMouseWheelSpin(event) { 
    if (timer) clearTimeout(timer);
    timer = setTimeout(function(){
       //your code here
    }, 30);   //delay
}

此外$("#mainGrid")也可以document.getElementById('mainGrid')

转换为.width()和.style.width

做动画时，本机代码总是比jQuery快。通过使用jQuery，您可以与write less进行交易。

我认为你上面附带的2个事件几乎同时执行，因此更加滞后。使用鼠标滚轮时，页面会滚动。使用clearTimeout(timer)将阻止先前的呼叫被终止

javascript，放大和缩小表格

1 个答案: