样本

Question

我使用此脚本预览完整尺寸的缩略图：http://cssglobe.com/lab/tooltip/02/

这是HTML：

<a href="image_big.jpg" class="preview"><img src="image_small.jpg" style="width: 140px;" /></a>

CSS：

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
    }

和js：

this.imagePreview = function(){ 

        xOffset = 100;
        yOffset = 30;


    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    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();
});

但我希望预览保持不变并显示在另一个div中，如：

<div id="left">
<img src="image_small.jpg" style="width: 140px;" />
</div>

<div id="right">
<a href="image_big.jpg" class="preview"></a>
</div>

没有图像移动（偏移）。有什么想法吗？

Answer 1

您可以通过创建占位符图像然后更改src属性来执行此操作：

样本

$("#left").children(".thumb").on({
  mouseenter: function() {
    $("#preview").attr("src", $(this).attr("src")).show();
  },
  mouseleave: function() {
    $("#preview").hide();
  }
});

.thumb {
  width: 140px;
  border: solid 1px #000;
  float: left;
  margin-right: 5px;
}
#preview {
  background: #333;
  border: solid 1px #000;
  clear: left;
  display: block;
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
  <img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
  <img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
  <img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
  <img id="preview" src="" alt="" />
</div>

另一个div中的jQuery图像预览

1 个答案:

样本