Question

任何人都有一个很好的jquery Image Preview插件。一直在寻找但没有发现任何好事。要求是：

图片显示在悬停
图像悬停翻转以避免与浏览器窗口的两侧发生碰撞

我一直在使用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});
                    }
                }
            }
        )

图像预览Jquery

2 个答案: