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

来源:互联网 发布:extmail windows ad 编辑:程序博客网 时间:2024/05/02 00:26
无聊写的一个小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();        });


效果图:


1 0
原创粉丝点击