图像悬停 jQuery 插件如何工作？

发布于 2024-10-18 05:04:53 字数 1097 浏览 3 评论 0原文

我想在我的网站上使用图像悬停插件。

由于我只使用了一周的jQuery，所以还不是那么熟练。我想要的是：

在我的网站上，我创建了各种缩略图，显示我的项目的预览。我真正想要的是，当你遇到“悬停”的图片时，该图片有一种模式。（这个模式在所有图像中都意味着。）有人可以帮助我实现代码吗？

这将是淡入淡出的一部分：

    if(opt.fade){
      var offset = node.offset();
      var hover = node.clone(true);
      hover.attr('src', hoverImg);
      hover.css({
        position: 'absolute',
        left: offset.left,
        top: offset.top,
        zIndex: 1000
      }).hide().insertAfter(node);
      node.mouseover(
        function(){
          var offset=node.offset();
          hover.css({left: offset.left, top: offset.top});
          hover.fadeIn(opt.fadeSpeed);
          node.fadeOut(opt.fadeSpeed,function(){node.show()});
        }
      );
      hover.mouseout(
        function(){
          node.fadeIn(opt.fadeSpeed);
          hover.fadeOut(opt.fadeSpeed);
        }
      );
    }else{
      node.hover(
        function(){node.attr('src', hoverImg)},
        function(){node.attr('src', orgImg)}
      );
    }

原文

I would like to use the Image Hover plugin on my website.

Since I have only used jQuery for a week, I am not that skilled. What I would like is the following:

On my website I have all sorts of thumbnails created which shows previews of my projects. What I exactly want is, when you come across a picture "hovered" there is a pattern about that picture is as it were. (This pattern at all images meant.) Can someone help me implement the code?

This would be part of the fade:

    if(opt.fade){
      var offset = node.offset();
      var hover = node.clone(true);
      hover.attr('src', hoverImg);
      hover.css({
        position: 'absolute',
        left: offset.left,
        top: offset.top,
        zIndex: 1000
      }).hide().insertAfter(node);
      node.mouseover(
        function(){
          var offset=node.offset();
          hover.css({left: offset.left, top: offset.top});
          hover.fadeIn(opt.fadeSpeed);
          node.fadeOut(opt.fadeSpeed,function(){node.show()});
        }
      );
      hover.mouseout(
        function(){
          node.fadeIn(opt.fadeSpeed);
          hover.fadeOut(opt.fadeSpeed);
        }
      );
    }else{
      node.hover(
        function(){node.attr('src', hoverImg)},
        function(){node.attr('src', orgImg)}
      );
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

勿忘心安 2024-10-25 05:04:53

不确定你的意思...我真正想要的是，当你遇到“悬停”的图片时该图片有一个模式。（这个模式在所有图像中都意味着。）这句话对我来说没有意义。请澄清...
我不明白为什么您需要重写插件内部结构。
如果我理解正确，您希望使用单个自定义图像作为 src 属性的一部分来传递给 imghover 插件。为此，只需确保它位于正确的位置并指定它的完整路径。
因此，例如，您的图像位于 /images/image01.png 中，而将用于所有图像的悬停图像位于 /images/hover.png 中，您会执行...类似的操作$("img").imghover({src:"/images/hover.png"});在您的窗口加载事件处理程序或 $(function() {...} jQuery 等效项中。
再次确保包含完整路径。而不仅仅是hover.png。

请参阅我所做的示例这里。我必须引入 imghover 的完整源代码并将其作为内联脚本放入，因为由于某种原因我无法拥有它直接从存储库流式传输，但我没有修改插件内的任何内容。