Помогите решить проблему jq.imghover1.1, когда контейнер для изображений находится в абсолютном положении! - PullRequest
Новая
       19

Помогите решить проблему jq.imghover1.1, когда контейнер для изображений находится в абсолютном положении!

0 голосов
/ 17 ноября 2009

Я работаю на сайте с плагином jq.imghover1.1.js для jquery. Плагин прекрасно работает почти в любых обстоятельствах, но я сделал позицию: абсолютную для div, который содержит изображения, которые будут затронуты плагином, и теперь, когда плагин исчезает при наведении изображения, они делают это далеко справа от оригинальная кнопка.

Код: 

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

.container {
width: 1004px;

поле: 0 авто; дисплей: таблица;} 

.top {

высота: 140 пикселей; положение: абсолютное; верх: 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 вычислять левое расстояние, но, как вы могли видеть, у контейнера нет левого края: Xpx объявлен, так что imghover принимает как должное позицию слева от экрана, затем добавляет ее к объявлению, и я получаю изображение на 300px далеко вправо, чем нужно.

Любая идея будет отличной!

1 Ответ

0 голосов
/ 24 ноября 2010

Я не понял, никто не ответил на этот вопрос. Если кто-то может найти это полезным, вот оно:

В оригинальном 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 в качестве параметра при вызове скрипта. Я постараюсь сделать это сам.

...