当图像容器绝对定位时，帮助解决 jq.imghover1.1 问题！

发布于 2024-08-11 03:04:04 字数 3493 浏览 3 评论 0原文

我正在一个带有 jquery 插件 jq.imghover1.1.js 的网站上工作。该插件几乎在任何情况下都可以很好地工作，但我为包含将受该插件影响的图像的 div 做了一个position:absolute，现在当插件淡入悬停图像时，它们会在距离右侧很远的地方执行此操作。原来的按钮。

代码：

<html>
<head>
<style type="text/css">

.container {
width: 1004px;

保证金：0自动；显示：表格；}

.top {

高度：140px；位置：绝对；顶部：0px；左：0px；}

<script type="text/javascript"

$(document).ready(function(){
        $('img.on').imghover({suffix: '_b',fade: true,fadeSpeed: 400});
    });

</script>
</head>
<body>

<div class="container top">
    <div class="mainmenu">
    <img alt="acerca de" height="53" src="images/mm-acercade.jpg" width="117" class="on" />
    </div>
</div>
</body>
</html>

JS：

/**
 *  jquery.popupt
 *  (c) 2008 Semooh (http://semooh.jp/)
 *
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 **/
(function($){
 $.fn.extend({
  imghover: function(opt){
   return this.each(function() {
        opt = $.extend({
            prefix: '',
            suffix: '_o',
            src: '',
            btnOnly: true,
            fade: false,
            fadeSpeed: 500
          }, opt || {});

        var node = $(this);
    if(!node.is('img')&&!node.is(':image')){
          var sel = 'img,:image';
          if (opt.btnOnly) sel = 'a '+sel;
          node.find(sel).imghover(opt);
          return;
        }

        var orgImg = node.attr('src');

        var hoverImg;
        if(opt.src){
          hoverImg = opt.src;
        }else{
          hoverImg = orgImg;
          if(opt.prefix){
            var pos = hoverImg.lastIndexOf('/');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos-1)+opt.prefix+hoverImg.substr(pos-1);
            }else{
              hoverImg = opt.prefix+hoverImg;
            }
          }
          if(opt.suffix){
            var pos = hoverImg.lastIndexOf('.');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos)+opt.suffix+hoverImg.substr(pos);
            }else{
              hoverImg = hoverImg+opt.suffix;
            }
          }
        }

        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)}
          );
        }
   });
  }
 });
})(jQuery);

整个问题是，当您悬停按钮时，imghover 会将图像悬停在原始图像之上，计算距屏幕左侧的距离以定位悬停图像。当您使用position:absolute div作为将受imghover影响的图像的容器时，悬停图像的位置计算保持不变，除非您添加left: Xpx，这有助于imghover计算左侧距离，但正如你所看到的，容器没有 left: XPx 声明，因此 imghover 理所当然地认为屏幕左侧的位置，然后将其添加到其声明中，最终得到一个比所需的右端约 300px 的悬停图像。

任何想法都会很棒！

原文

I'm working in a site with the plugin jq.imghover1.1.js for jquery.
The plugin works great almost in any circumstances, but I did a position:absolute for a div that contains the images that will be affected by the plugin and now when the plugin fade the hover images in, they do it far to the right of the original button.

The Code:

<html>
<head>
<style type="text/css">

.container {
width: 1004px;

margin: 0 auto;
display: table;}

.top {

height: 140px;
position: absolute;
top: 0px;
left: 0px;}

<script type="text/javascript"

$(document).ready(function(){
        $('img.on').imghover({suffix: '_b',fade: true,fadeSpeed: 400});
    });

</script>
</head>
<body>

<div class="container top">
    <div class="mainmenu">
    <img alt="acerca de" height="53" src="images/mm-acercade.jpg" width="117" class="on" />
    </div>
</div>
</body>
</html>

The JS:

/**
 *  jquery.popupt
 *  (c) 2008 Semooh (http://semooh.jp/)
 *
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 **/
(function($){
 $.fn.extend({
  imghover: function(opt){
   return this.each(function() {
        opt = $.extend({
            prefix: '',
            suffix: '_o',
            src: '',
            btnOnly: true,
            fade: false,
            fadeSpeed: 500
          }, opt || {});

        var node = $(this);
    if(!node.is('img')&&!node.is(':image')){
          var sel = 'img,:image';
          if (opt.btnOnly) sel = 'a '+sel;
          node.find(sel).imghover(opt);
          return;
        }

        var orgImg = node.attr('src');

        var hoverImg;
        if(opt.src){
          hoverImg = opt.src;
        }else{
          hoverImg = orgImg;
          if(opt.prefix){
            var pos = hoverImg.lastIndexOf('/');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos-1)+opt.prefix+hoverImg.substr(pos-1);
            }else{
              hoverImg = opt.prefix+hoverImg;
            }
          }
          if(opt.suffix){
            var pos = hoverImg.lastIndexOf('.');
            if(pos>0){
              hoverImg = hoverImg.substr(0,pos)+opt.suffix+hoverImg.substr(pos);
            }else{
              hoverImg = hoverImg+opt.suffix;
            }
          }
        }

        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)}
          );
        }
   });
  }
 });
})(jQuery);

The whole problem is that when you hover the button, the imghover hovers an image on top of the original one, calculating the distance from left of the screen to position the hovering image. When you do a position:absolute div as container for the images that will be affected by the imghover, the calculations for the positioning of the hovering image keeps the same unless you add a left: Xpx, which helps the imghover calculating the left distance, but as you could see, the container has no left: Xpx declared so the imghover take for granted the position from the left of the screen, then adds it to its declaration and I end up with a hovering image about 300px far right than needed.

Any idea will be great!

分享到QQ

分享到微博

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

发布评论

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

星星的轨迹 2024-08-18 03:04:04

我还没意识到没有人回答这个问题。
如果有人觉得它有用，这里是：

在原来的JS中，改变这个：

if(opt.fade){
          // change from this: var offset = node.offset();
          var offset = node.position();
          // so the positioning is absolute related to the parent;
          var hover = node.clone(true);
          hover.attr('src', hoverImg);

当我使用offset()时，它计算窗口左侧和顶部的偏移量，因此图像的坐标向下和向右走得很远。

当使用position()时，它会从偏移父级获取左侧和顶部，因此它不应该向下或向右太远，并且在与原始图像相同的位置进行淡入淡出。

但在 jq.imghover1.1.js 中还有另一件事需要更改：

function(){
              var offset=node.offset();
// original   hover.css({left: offset.left, top: offset.top});
              hover.css({left: offset, top: offset});
// if you keep the .left and .top data then the positioning will fail.
              hover.fadeIn(opt.fadeSpeed);

这可能会成为该插件的更好实现，我的意思是，在调用脚本时添加 imghover 的位置或偏移值作为参数。我会尝试自己做。

I haven't realized no one has answered this question.
In case there's someone who may find it useful, here it is:

In the original JS, change this:

if(opt.fade){
          // change from this: var offset = node.offset();
          var offset = node.position();
          // so the positioning is absolute related to the parent;
          var hover = node.clone(true);
          hover.attr('src', hoverImg);

When I used offset(), it calculates the offset form the window left and top sides, so the coordinates of the image(s) went far down and right.

When using position() it takes the left and top from the offset parent so it shouldn't go far down or right and do the fade in the same place as the original image.

But in the jq.imghover1.1.js there's another thing to change:

function(){
              var offset=node.offset();
// original   hover.css({left: offset.left, top: offset.top});
              hover.css({left: offset, top: offset});
// if you keep the .left and .top data then the positioning will fail.
              hover.fadeIn(opt.fadeSpeed);

This could become a better implementation of this plugin, I mean, adding the position or offset value for the imghover, as a parameter when you call the script. I'll try to do it myself.

回复收藏 0 原文

~没有更多了~