1

我将以下代码放在一起，但在 Safari/Chrome 和 Firefox 中测试时发现性能略有不同。

var box = $('#menu');

var windowHeight = $(window).height();
var boxHeight = box.height();
var diff = windowHeight - boxHeight;

var startY = 0;
var dist = 0;
var boxtop = box.position().top;

var boxoffset = box.offset().top;


function movehandler(event){
    box.css('background-color' , '#ffff00');
    dist = (event.pageY - startY);
    var val = boxtop + dist

    box.css('-moz-transform' , 'translate(0px, '+ val +'px)');
    box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');

    if (val < 0) {
        box.css('WebkitTransform' , 'translate(0px, 0px)');
        box.css('-moz-transform' , 'translate(0px, 0px)');

    } else if (val > diff) {
        box.css('WebkitTransform' , 'translate(0px, '+ diff +'px)');
        box.css('-moz-transform' , 'translate(0px, '+ diff +'px)');
    } else {
        box.css('WebkitTransform' , 'translate(0px, '+ val +'px)');
        box.css('-moz-transform' , 'translate(0px, '+ val +'px)');
    };          
}

box.bind('mousedown' , function(event){
    box.css('background-color' , '#ff00ff');
    box.bind('mousemove' , movehandler);
    startY = event.pageY;    
    boxtop = box.position().top;
});

box.bind('mouseup' , function(event){
    box.css('background-color' , '#333');
    boxtop = box.position().top;
    box.unbind('mousemove' , movehandler);
});

我注意到的是，在 Chrome/Safari 中，#menudiv 使用鼠标在第一次和随后的点击/移动中平滑滚动。但在 Firefox 中，它在第一次单击时起作用，但要让#menudiv 在第二次单击/移动时移动，mousedown则需要您mouseup在框移动之前进行。如果您尝试在不释放鼠标的情况下单击并移动 div，则 div 似乎会浮出框外。

我的代码中是否有任何内容会导致这种性能差异，或者两个浏览器是否都像他们应该的那样解释鼠标事件？

这是一个演示，因此您可以看到我在说什么。

此外，对我的代码的任何一般想法或评论都会受到赞赏，因为我一直在寻求改进。

4

0 回答 0