Javascript 图标鼠标悬停时的图像预览

我正在尝试使用

Jquery

和

Javascript

，因此当客户端鼠标越过

PageGridView

上使用的通用图标时，它将显示略偏离图标的缩略图

我在借用我在上面找到的密码

正在使用的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>

#Fullimg{位置：绝对；显示：无；z索引：-1}
#预演{
位置：绝对位置；
边框：3px实心#ccc；
背景：#333；
填充物：5px；
显示：无；
颜色：#fff；
盒形阴影：4×4×3×rgba（103、115、130、1）；
}
前{
显示：块；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：正常；
填充：7px；
边框：3px实心#bae2f0；
背景#e3f4f9；
边缘：.5em0；
溢出：自动；
宽度：800px；
}

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>

//在页面加载时使用documentready函数启动jQuery
$（文档）.ready（函数（）{
图像预览（）；
});
//x和y偏移的配置
this.imagePreview=函数（）{
xOffset=-20；
yOffset=40；
$（“a.preview”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
var c=（this.t！=”）？“
”+this.t:”；
$（“正文”）。追加（“
”+c+”
”；
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
},
函数（）{
this.title=this.t；
$（“#预览”）.remove（）；
});
$（“a.preview”）.mousemove（函数（e）{
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});
};

图标：

。我已经在这件事上苦思冥想了将近一个星期，老板开始对我不能让它工作感到恼火

如果您能提供任何帮助或提供更有效的代码执行方法，我们将不胜感激。
我更正了代码中的一些基本部分。以下是链接：
您现在可以根据需要进行修改

代码：

//在页面加载时使用documentready函数启动jQuery
$（文档）.ready（函数（）{
var xOffset=-20；
var yOffset=40；
$（'.preview'）。on（'mouseover'，函数（e）{
var img=$（本）；
img.t=img.title；
img.title=“”；
变量c=（img.t！=”）？“
”+img.t:”；
$（“正文”）。追加（“
”+c+”
”；
$（“#预览”）.css({
“顶部”：（e.pageY-xOffset）+“px”，
“左”：（e.pageX+yOffset）+“px”，
“显示”：“块”，
});
});
$（'.preview'）。on（'mouseleave'，函数（e）{
$（“#预览”）.remove（）；
})
});
浏览器控制台中有错误吗？我被小提琴上的编码搞糊涂了。看起来您正在将侦听器应用到$（'a.preview'）：DOM中不存在的元素，并且我看到的任何jQuery都没有添加该元素。在运行函数时，您似乎也在使用“this”，但这是必需的吗？为什么不通过$.fn.extend创建一个函数，并使用$（'a.preview'）.ImagePreview（）运行它呢；然后在那里定义鼠标悬停处理程序？@JayBlanchard浏览器代码中没有错误，这是令人困惑的部分。@linnium我缺少CSS的一部分，而这部分看起来像。我正在努力学习Javascript和JQuery，但这并不是我在军队软件工程所需要的技能的一部分。我看到了你@kamlesh kushwaha所做的改变，我不得不说，非常感谢你！我对Jquery和Javascript不是很熟悉，但是您的更改使它工作得非常好，谢谢。
<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"))%>'/>

        // 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();
        })
        });