圖片預覽jquery

Question

任何人都有一個很好的jQuery圖像預覽插件。一直在尋找，但沒有發現什麼好的。要求是：

• 圖像顯示在懸停
• 圖片懸停翻轉，以避免與瀏覽器窗口的側面碰撞

我一直在使用imgPreview，但它不提供碰撞。任何其他？

謝謝！

Answer 1

您可以繼續使用imgpreview並使用回調onShow。這在插件文檔中有詳細介紹。該回調包含對容器的引用，然後您可以更改要定位的CSS屬性。

http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

設置容器爲隱藏，然後將你自己定位在它回調。通過查看示例，容器是絕對定位的，因此您只需修改頂部和左側屬性即可將其顯示在屏幕上。

pseudocode: 
$('a').imgPreview({ 
    imgCSS: { 
     visible: 'hidden' 
    }, 
    onShow: function(link){ 
     //is element visible? 
     $(this).css('top', xx).css('left', yy).css('visible', ''); 
    } 
}); 

Is element visible on screen?

Answer 2

由於@mrtsherman，它不完全是我使用，但它讓我思考。我做了：

$('.a').imgPreview(
      { 
       preloadImages : false, 
       onLoad: function() 
       { 
        if ($(this).parent().position().left > 600) 
        { 
         var pLeft = $(this).parent().position().left; 
         var pTop = $(this).parent().position().top; 
         var width = $(this).parent().width(); 
         pLeft = pLeft - width; 
         $(this).offset({top: pTop, left: pLeft}); 
        } 
        else 
        { 
         var pLeft = $(this).parent().position().left; 
         var pTop = $(this).parent().position().top; 
         $(this).offset({top: pTop, left: pLeft}); 
        } 
       } 
      } 
     )