javascript - 图标鼠标悬停时的图像预览

Question

我正在尝试使用 Jquery 和 Javascript，因此当客户端将鼠标悬停在 PageGridView 上使用的通用图标时，它将显示缩略图图像与图标略有偏移。

我正在借用我在 Techrepublic 上找到的代码.

使用的CSS:

<style type="text/css">
    #Fullimg{position:absolute;display:none;z-index:-1}
    #preview{
      position:absolute;
      border:3px solid #ccc;
      background:#333;
      padding:5px;
      display:none;
      color:#fff;
      box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
    }
    pre{
      display:block;
      font-family:Tahoma, Geneva, sans-serif;
      font-weight:normal;
      padding:7px;
      border:3px solid #bae2f0;
      background:#e3f4f9;
      margin:.5em 0;
      overflow:auto;
      width:800px;
   }
</style>

Javascript:

<script type="text/javascript" language="javascript">
    // Kick off the jQuery with the document ready function on page load
    $(document).ready(function(){
          imagePreview();
    });
    // Configuration of the x and y offsets
    this.imagePreview = function(){
        xOffset = -20;
        yOffset = 40;
    $("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.link +"' alt='Image preview' />"+ c +"</p>");
     $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
    },
    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");
    });
    };
</script>

图标:

<asp:Image ID="imgThumbnail" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" ClientIDMode="Static" CssClass="preview" link='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureThumb&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>'/>

该代码绝对没有做任何奇怪的事情，尽管甚至试图让它在 fiddle 中工作。 。我已经在这件事上苦苦挣扎了将近一个星期，老板开始对我无法让它工作感到恼火。

任何帮助或更高效的代码方法将不胜感激。

Answer 1

我纠正了代码中的一些基本部分。这是链接:http://fiddle.jshell.net/bpVUk/2/ 您现在可以根据需要进行修改。

代码:

        // Kick off the jQuery with the document ready function on page load
    $(document).ready(function () {
        var xOffset = -20;
        var yOffset = 40;
        $('.preview').on('mouseover', function (e) {
            var img = $(this);
            img.t = img.title;
            img.title = "";
            var c = (img.t != "") ? "<br/>" + img.t : "";
            $("body").append("<p id='preview'><img src='" + img.attr('link') + "' alt='Image preview' />" + c + "</p>");
            $("#preview").css({
                "top": (e.pageY - xOffset) + "px",
                    "left": (e.pageX + yOffset) + "px",
                    'display': 'block',
            });
        });
        $('.preview').on('mouseleave', function (e) {
            $('#preview').remove();
        })
        });