JS 悬浮框显示图片

使用方式

1、元素的设置
<img src="${src}" alt="头像" width="20" height="20" class="apreview" title="${title}"/>
2、加入css
<style type="text/css">  
    .preview {position:absolute;background:#fff;padding:10px;display:none;}  
</style> 
3、加入js脚本
$(function() {
    imagePreview();  
  });
this.imagePreview = function () {
    // 图片距离鼠标的位置
    this.xOffset = 10;
    this.yOffset = -10;

    //hover([over,]out)
    //over:鼠标移到元素上要触发的函数
    //out:鼠标移出元素要触发的函数

    //鼠标悬浮的事件
    $(".apreview").hover(function (e) {
        this.t = this.title;//显示在图片下的标题
        this.title = "";    //将title置为空,不让文字悬浮提示
        this.imgSr = this.src;//图片的连接
        this.c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p class='preview'><img src='" + this.imgSr + "' alt='Image preview' width='140' height='140' />" + this.c + "</p>");
        $(".preview")
            .css("top", (e.pageY + yOffset) + "px")
            .css("left", (e.pageX + xOffset) + "px")
            .fadeIn("fast");
    },
    function () {
        this.title = this.t;//恢复title
        $(".preview").remove();
    });


    //鼠标移动的事件,让图片随着移动
    $(".apreview").mousemove(function (e) {  
        $(".preview")
            .css("top", (e.pageY - yOffset) + "px")
            .css("left", (e.pageX + xOffset) + "px");
    });
};
4、最终显示效果

这里写图片描述

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值