IE中Jquery函数.offset的输出问题

时间:2011-01-13 13:51:15

标签: jquery internet-explorer-8 offset

我是jquery和javascript的新手,以及整体开发的网站,我遇到了.offset函数的问题。我有以下代码在chrome和FF上正常工作但不能在IE上工作:

$(document).keydown(function(k){  
    var keycode=k.which;  
    var posk=$('html').offset();  
    var centeryk=screen.availHeight*0.4;  
    var centerxk=screen.availWidth*0.4;  
    $("span").text(k.which+","+posk.top+","+posk.left);  
    if (keycode==37){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollLeft:-1*posk.left-centerxk})  
    };  
    if (keycode==38){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollTop:-1*posk.top-centeryk})  
    };  
    if (keycode==39){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollLeft:-1*posk.left+centerxk})   
    };
    if (keycode==40){
        k.preventDefault();
        $("html,body").stop().animate({scrollTop:-1*posk.top+centeryk})
    };  
});  
我想要它做的是使用箭头键将窗口滚动一个设定的百分比,所以我的想法是找到文档左上角的当前坐标并相对于用户屏幕添加一个百分比并为滚动设置动画,使内容不会跳跃,用户从他所在的地方失去焦点。 $(“span”)。文本只是让我知道发生了什么,并在代码完成后转换为注释。

所以这就是在Chrome和Firefox上发生的情况,位置变量的$(“span”)。文本的输出是正确的,从0,0开始并始终显示在坐标中滚动了多少内容,但是在IE上它从-2,-2开始并且永远不会离开它,即使我手动滚动窗口直到它结束并尝试使用右箭头键它仍然会返回-2的初始值-2并滚动回到开始。

我尝试用offset替换document.body.scrollLetf和scrollTop,但结果是一样的,只是这次坐标是0,0。难道我做错了什么?或者这是一些IE漏洞?有没有办法解决它或我可以使用的其他功能并获得相同的结果?

另一方面,我在网站的这一部分为用户做了其他两个导航选项,一个是点击并拖动屏幕上的任意位置移动它:

$("html").mousedown(function(e)
{
    var initx=e.pageX
    var inity=e.pageY
    $(document).mousemove(function(n)
    {   
        var x_inc= initx-n.pageX;
        var y_inc= inity-n.pageY;
        window.scrollBy(x_inc*0.7,y_inc*0.7);
        initx=n.pageX;
        inity=n.pageY
        //$("span").text(initx+ "," +inity+ "," +x_inc+ "," +y_inc+ "," +e.pageX+ "," +e.pageY+ "," +n.pageX+ "," +n.pageY);

    // cancel out any text selections
    document.body.focus();

    // prevent text selection in IE
    document.onselectstart = function () { return false; };
    // prevent IE from trying to drag an image
    document.ondragstart = function() { return false; };

    // prevent text selection (except IE)
    return false;
    });
});

$("html").mouseup(function()
{
    $(document).unbind('mousemove');
});

我没写的代码中唯一的部分就是防止文本选择行,这些是我在教程中找到的关于点击和拖动对象的内容,无论如何,这段代码在Chrome,FireFox和IE上工作得很好,不过在Firefox上和IE浏览器更常见的是当你拖动时发生一些动作故障,有时看起来“滚动”是一个小小的锯齿状,它只是一个视觉事物并没有那么重要,但如果有办法防止它我想知道。

1 个答案:

答案 0 :(得分:1)

好吧我刚刚解决了将posk变量改为

的问题
    var poskt=$(document).scrollTop(); 

并为scrollLeft添加了一个新的var,这样代码在Chrome,FF和Internet Explorer上的行为相同