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

图标鼠标悬停的图像预览

1 个答案: