使用jquery更改鼠標懸停上顯示的圖像的位置

當用戶將鼠標懸停在圖像的拇指版上並且較大的圖像隨鼠標移動時，以下代碼將顯示較大的圖像。下面的代碼起作用，但它將圖像定位在鼠標右側。我希望圖像出現在鼠標上方的中心位置。使用jquery更改鼠標懸停上顯示的圖像的位置

我已經改變了xOffset和yOffset值，這將改變上下位置，並將圖像移動到右側，但沒有離開。

問題是如何修改代碼以使懸停時出現的圖像位於較小圖像的上方？

我通過谷歌採用了最新的jQuery（1.9.1）：http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

jquery的：

this.imagePreview = function(){ 
xOffset = 0; 
yOffset = 20; 

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

$(document).ready(function(){ 
    imagePreview(); 
});

的HTML/PHP：

echo '<div style="display:inline;float:left;margin: 10px 4px;"> 
     <div style="background-color: #DDD;height:100px;border: 1px solid #111;">'; 
      if ($spacer_flag == 0) 
      { 
       echo ' 
       <a href="/view.php?im='.$image_dbid.'&w='.$row['id'].'" title="'.$row['word'].'"> 
       <img class="preview" 
       src="'.$t_show_this_image.'" 
       alt="'.$x_show_this_image.'" 
       > 
       </a>'; 
      } 
      else 
      { 
       echo ' 
       <a href="/reserve.php?w='.$row['id'].'" title=""> 
       <img 
       src="'.$t_show_this_image.'" 
       ></a>'; 
      } 

      echo ' 
     </div> 
    </div>';

來源

2013-04-04 Mark

你可以發佈你的HTML嗎？ – 2013-04-04 07:35:49

@DeclanMcNulty - 添加了html – Mark 2013-04-04 08:00:23

通過它的聲音你希望圖像是靜態的而不是用鼠標指針移動。如果是這種情況，如何添加一個隱藏的div包含您希望顯示的圖像，並將其設置爲CSS中較小圖像上方的頂部中心。

然後，在MouseHover事件，再次做一個簡單的

$("#previewDiv").show()

然後

$("#previewDiv").hide()

隱藏它的onmouseout？

來源

2013-04-04 09:45:14

使用jquery更改鼠標懸停上顯示的圖像的位置

回答

相關問題