jQuery鱼眼效果+鼠标移动平移

jquery

2012-03-21 51 views 0 likes

我正试图结合鼠标平移效果与鱼眼插件http://interface.eyecon.ro/docs/fisheye。jQuery鱼眼效果+鼠标移动平移

这些做工精细分开，但两人一起完全痉挛

有没有什么可以改变或添加到下面的代码，一切都顺利吗？

鼠标平移：

$("body").mousemove(function(e) { 
    var distance = e.pageX - $(this).offset().left; 
    var percentage = distance/$(this).width(); 
    var targetX = -Math.round(($(".dock-container").width() - $(this).width()) * percentage); 
    $('.dock-container').animate({left: [targetX+"px", "easeOutSine"]}, { queue:false, duration:2500 }); 
});

鱼眼：

$('#dock').Fisheye({ 
    maxWidth: 42, 
    items: 'a', 
    itemsText: '', 
    container: '.dock-container', 
    itemWidth: 40, 
    proximity: 90, 
    halign : 'center' 
});

来源

2012-03-21 smallhours

回答

如果你看鱼眼插件是如何工作的，你会看到它的动画属性left的.dock-container。您的鼠标移动代码还会动画.dock-container的左侧属性，因此最终您的代码正在与鱼眼对战。你应该考虑移动你的代码来为父项设置动画（例如dock，或在另一个div中包装dock并为其设置动画效果），以便left动画不会相互争夺。如果您设置了jsFiddle，我们可能有机会尝试修复它。否则很难说我的解决方案是否可行。

来源

2012-03-21 23:56:31

谢谢！这工作！ – smallhours 2012-03-22 16:48:02

我认为mousemove事件应该放在一个包装div上 - 也可以看看hoverintent插件。

来源

2012-03-22 00:01:26 Dylan

jQuery鱼眼效果+鼠标移动平移

回答

相关问题