Javascript，放大和缩小一个表

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

这是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中，它在工作之前会有一段延迟。当我尝试滚动它说"没有响应"几秒钟，然后在它开始响应后，它会再次工作，但非常缓慢。什么好主意吗?

存在延迟，因为onMouseWheelSpin被重复调用并且速度太快。火狐不像Chrome、Safari等webkit浏览器那么强大。为了解决这个问题，您可以实现一个计时器来减少工作量。

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

用.style.width可以将$("#mainGrid")转化为document.getElementById('mainGrid')和.width()

在制作动画时，本机代码总是比jQuery快。使用jQuery，你是在用性能换取write less。

我认为你上面附加的两个事件几乎同时执行，因此更延迟。当你使用鼠标滚轮时，你的页面是滚动的。使用clearTimeout(timer)将防止之前的调用被终止

相关内容

最新更新

热门标签：