jquery实现 悬浮显示,例子显示图片

无聊写的一个小demo

html:
<style type="text/css">
    #preview {position:absolute;background:#fff;padding:10px;display:none;}

</style>
<a id="apreview" title="qqqqqq" class="btn" href="">立即注册</a>


js:

this.imagePreview = function () {
            this.xOffset = 250;
            this.yOffset = -330;
            this.imgSr = "images/tmp_0002.jpg";
            $("#apreview").hover(function (e) {
                this.t = this.title;//显示在图片下的标题
                this.title = "";
                var c = (this.t != "") ? "<br/>" + this.t : "";
                $("body").append("<p id='preview'><img src='" + imgSr + "' alt='Image preview' />" + c + "</p>");
                $("#preview")
                    .css("top", (e.pageY - xOffset) + "px")
                    .css("left", (e.pageX + yOffset) + "px")
                    .fadeIn("fast");
            },
            function () {
                this.title = this.t;
                $("#preview").remove();
            });
            $("#apreview").mousemove(function (e) {
                $("#preview")
                    .css("top", (e.pageY - xOffset) + "px")
                    .css("left", (e.pageX + yOffset) + "px");
            });
        };
        $(document).ready(function () {
            imagePreview();
        });


效果图:


©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值