JavaScript实现图片悬浮预览

一、前端页面中编辑控件展示图片来源路径。我这里是C# web项目的aspx页面，和HTML一样的，不同项目可以将代码中间的<%=path %>替换为实际项目中的图片来源路径变量。

<tr>
    <td>缩略图:</td>
    <td>
        <a href="<%=path %>" id="a1" class="tooltip">
        <img id="f1" src="<%=path %>" alt="1" width="80" height="80" />
        </a>
    </td>
</tr>

 二、编写JavaScript代码，当鼠标移动到指定控件时生成悬浮预览框。可以指定预览框的位置。

<script type="text/javascript">
    //图片预览
    $(function () {
        var x = 8;
        var y = 8;
        $("a.tooltip").mouseover(function (e) {
            //console.log(this.href);
            var pageHeight = $(document).height();
            var pageWidth = $(document).width();
            //console.log(pageHeight + "|" + pageWidth);
            var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='' /><\/div>"; //创建 div 元素
            $("body").append(tooltip);	//把它追加到文档中						 
            $("#tooltip")
                .css({
                    "bottom": (pageHeight - e.pageY) + "px",
                    "left": (e.pageX + x) + "px"
                }).show("fast");	  //设置x坐标和y坐标，并且显示

        }).mouseout(function () {
            $("#tooltip").remove();	 //移除 
        }).mousemove(function (e) {
            $("#tooltip")
                .css({
                    "bottom": (pageHeight - e.pageY) + "px",
                    "left": (e.pageX + x) + "px"
                });
        });
    });
</script>