JavaScript特效—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、最终显示效果