0

基本上我想做的是当我向上滚动时，放大我的表格，使其变大，当我向下滚动时，缩小表格，使其变小。

这是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中，它工作之前有一个滞后。当我尝试滚动时，它会说“没有响应”几秒钟，然后在它再次开始响应后它会起作用，但速度很慢。有任何想法吗？提前致谢。

4

1 回答 1

1

有滞后，因为onMouseWheelSpin被反复调用太快。Firefox 不如 Chrome、Safari 等 webkit 浏览器强大。要解决此问题，您可以实施计时器以减少工作量。

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

也$("#mainGrid")可以转换为document.getElementById('mainGrid')and .width()with.style.width

在做动画时，原生代码总是比 jQuery 快。通过使用 jQuery，您可以write less进行性能交易。

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

于 2013-05-22T20:01:26.627 回答