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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值