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

发布于 10-18 05:04 字数 1097 浏览 6 评论 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)}
      );
    }

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

勿忘心安2024-10-25 05:04:53
  1. 不确定你的意思...我真正想要的是,当你遇到“悬停”的图片时该图片有一个模式。 (这个模式在所有图像中都意味着。这句话对我来说没有意义。请澄清...

  2. 我不明白为什么您需要重写插件内部结构。

  3. 如果我理解正确,您希望使用单个自定义图像作为 src 属性的一部分来传递给 imghover 插件。为此,只需确保它位于正确的位置并指定它的完整路径。

    因此,例如,您的图像位于 /images/image01.png 中,而将用于所有图像的悬停图像位于 /images/hover.png 中,您会执行...类似的操作$("img").imghover({src:"/images/hover.png"});在您的窗口加载事件处理程序或 $(function() {...} jQuery 等效项中。

    再次确保包含完整路径。而不仅仅是hover.png。

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

  1. Not sure what you mean by ... 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.) This sentence just does not make sense to me. Please clarify...

  2. I don't see why you need to rewrite the plugin internals.

  3. If I am understanding you correctly, you want to use a single custom image as part of your src attribute to pass to the imghover plugin. To do that, just make sure it's in the right place and specify the full path to it.

    So, for example, you have your image in /images/image01.png and your hover image that is going to be used for all the images is in /images/hover.png, you would do ... something like $("img").imghover({src:"/images/hover.png"}); in your window load event handler or the $(function() {...} jQuery equivalent.

    Again, make sure to include full path. instead of just hover.png.

See the example that I did here. I had to bring in the full source of imghover and plop it in as inline script since for some reason I can't have it stream directly from the repository, but I didn't modify anything inside the plugin.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文