Jquery Tooltip圖像預覽左上角位置導致錯誤

我有一小排縮略圖圖片，我使用懸停效果翻轉使用jQuery工具提示插件，我在這裏找到：http://cssglobe.com/easiest-tooltip-and-image-preview-using-jquery。Jquery Tooltip圖像預覽左上角位置導致錯誤

該插件默認情況下工作正常，但我無法成功控制預覽圖像的位置。（具體地說 - 使預覽顯示左上角的縮略圖）

我的大部分圖像都在頁面的右側，所以我需要預覽顯示在縮略圖的左上角。當我調整JavaScript中的y或x偏移量變量時，光標和預覽圖像開始閃爍，就像它們在某種循環中一樣。

這裏的CSS：

<style> 
#screenshot{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    } 
</style>

這裏是JavaScript的：

this.screenshotPreview = function(){  
    /* CONFIG */ 

     xOffset = 10; 
     yOffset = 30; 

     // these 2 variable determine popup's distance from the cursor 
     // you might want to adjust to get the right result 

    /* END CONFIG */ 
    $("a.screenshot").hover(function(e){ 
     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 
     $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");         
     $("#screenshot") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px") 
      .fadeIn("fast");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#screenshot").remove(); 
    }); 
    $("a.screenshot").mousemove(function(e){ 
     $("#screenshot") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    });   
}; 


// starting the script on page load 
$(document).ready(function(){ 
    screenshotPreview(); 
});

這裏是我的HTML：

<a href="#" class="screenshot" rel="/images_no/products_large/img_10.png" title="Available Drawer Knob Options"><img src="/images_no/products_small/img_10.png" border="0"></a>

來源

2012-10-30 Jeremy Estes

嘗試改變CSS樣式#screenshot

#screenshot{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    margin-top:-300px; /* height of the container */ 
    margin-left:-480px; /* width of the container */ 
}

來源

2012-10-30 14:33:32 RomanTheGreat

它是一個骯髒的伎倆，但所有其他人將需要從您的js知識 – RomanTheGreat

謝謝你的答案。這工作，但我仍然得到一個隨機閃爍的彈出圖像和光標。 –

我想我已經解決了閃爍的問題。看起來好像光標正在觸摸彈出窗口，導致它無休止地重新加載。所以，我最終做的是設置xoffset = 450和yoffset = -280。 –

Jquery Tooltip圖像預覽左上角位置導致錯誤

回答

相關問題