Удалить смещение всплывающей подсказки Javascript для более привлекательного эффекта Hover Grow - PullRequest
Новая
       27

Удалить смещение всплывающей подсказки Javascript для более привлекательного эффекта Hover Grow

1 голос
/ 04 декабря 2010

Я пытаюсь что-то сделать и буду благодарен за любую предоставленную помощь!

У меня есть код всплывающей подсказки, который при наведении курсора на изображение появляется в подсказке с положением смещения через JS.Вместо того, чтобы смещать положение скрытого изображения во всплывающей подсказке, я хочу, чтобы изображение во всплывающей подсказке отображалось без смещений, Точно так же, как эффект наведения, который вы видите в этом примере .Мне нужно, чтобы позиция всплывающей подсказки вообще не смещалась, а находилась точно поверх изображения.Я не уверен, как это сделать, так как пример кода использует css, и мне нужно, чтобы он работал с этой подсказкой в ​​JS.

Вот код подсказки: 

too = tooo = bi = an = null; document.onmousemove = document.onmouseover = toolt;
function toolt(a) {
if(bi) {
    y = bi.offsetTop+bi.height-20;
    x = bi.offsetLeft+bi.width-12;
} else {
    y = (document.all) ? window.event.y + document.body.scrollTop  : a.pageY;
    x = (document.all) ? window.event.x + document.body.scrollLeft : a.pageX;
}
a = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
b = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
if (too != null) {
    if(too.offsetWidth+x+35-document.body.scrollLeft > b) x=document.body.scrollLeft+b-too.offsetWidth-35; too.style.left = (x+12)+"px";
    if(too.offsetHeight+y+40-document.body.scrollTop > a) y=y-too.offsetHeight-30; too.style.top = (y+20)+"px"; }
}
function htoo(i) { if(too)  too.style.display  = "none"; if(bi) bi.style.display = an ? "block" : "none"; tooo = false;}
function stoo(i) { if(tooo) tooo.style.display = "none"; if(bi) bi.style.display = an ? "block" : "none"; too = tooo = document.getElementById(i); too.style.display = "block"; if(bi = document.getElementById(i+"b")) bi.style.display="block";
}

Как мне выполнитьэто с данным кодом, есть идеи?

1 Ответ

0 голосов
/ 04 декабря 2010

Вы уверены, что можете настроить его лучше, но вот доказательство концепции .
Примечание: стиль ваших изображений должен быть position: relative

Использование ( Демо ) 

FancyZoom("container");

Конструктор 

function FancyZoom(container, options) {
  container = container || document;
  if (typeof container == "string") {
    container = document.getElementById(container);
  }

  function isNodeName(el, name) {
    return el.nodeName.toLowerCase() === name;
  }    

  function getTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement;
  }

  // image {mouseover} event handler (delegated)
  container.onmouseover = function(e) {
    var el = getTarget(e);
    if (isNodeName(el, "img")) {
      zoomIn(el);
      // image {mouseout} event handler
      el.onmouseout = function(e) {
        zoomOut(el);
        el.onmouseout = null;
      };  
    }
  };
}

Анимация ( emile.js ) 

function zoomIn(thumb) {
    thumb.style.zIndex = 10;
    emile( thumb,
      "width:"  + 174 + "px;" +
      "height:" + 174 + "px;" +
      "margin-left:" + -37 + "px;" +
      "margin-top:"  + -37 + "px;",
      { duration: 200 }
    );
}

function zoomOut(thumb) {
    thumb.style.zIndex = 1;
    emile( thumb,
      "width:"  + 100 + "px;" +
      "height:" + 100 + "px;" +
      "margin-left:" + 0 + "px;" +
      "margin-top:"  + 0 + "px;",
      { duration: 100 }
    );

}

Проверено: IE7 +, FF2 +, Safari 4+, Chrome, Opera

...