0
所以我做了一个图像翻动画动画,对mousedrag作出反应。它在Safari浏览器& IE中正常工作,但不支持Firefox。当我拖动鼠标时,交换图像会闪烁。我恐怕不知何故img
或div
被选中导致闪烁,所以我关闭了任何可选属性。我甚至转向了拖动,只是使用了X鼠标的位置。它仍然闪烁。这是渲染还是我的代码的内存问题?这些是相当大的图像像800px x 500px。jQuery图像交换动画Firefox闪烁
(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();
});