所以我制作了一个对鼠标拖动做出反应的图像翻书动画。它在 Safari 和 IE 中运行良好,但在 Firefox 中运行良好。当我拖动鼠标时,交换的图像会闪烁。恐怕以某种方式选择img
ordiv
会导致闪烁,所以我关闭了任何可选属性。我什至关闭了拖动,只使用了 x 鼠标位置。它仍然在闪烁。渲染或我的代码是内存问题吗?这些是相当大的图像,例如 800 像素 x 500 像素。
(function($){
$.fn.setframe = function(frame){
return this.each(function(){
var $image = $(this);
function imageName(frame){
return 'images/inx'+frame+'.png';
}
$image.attr('src', imageName(frame));
});
};
})(jQuery);
$(document).ready(function(){
var dragDistance = 15;
var originalX = null;
var frame = 1;
$('.cot').mousedown(function(e) {
e.preventDefault();
originalX = e.pageX - frame * dragDistance;
$(document).mousemove(function(e) {
e.preventDefault();
frame = Math.floor( ((e.pageX - originalX) / dragDistance) % 35);
if(frame > 0) {
$('img.inx').setframe(frame);
} else {
$('img.inx').setframe(Math.abs(frame+ 35));
}
});
});
$(this).mouseup(function() {
$(document).unbind('mousemove');
});
}
$('img').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
$('.cot').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
$('img').disableSelection();
$('.cot').disableSelection();
});