以下为javascript代码:
this.imagePreview = function() { xOffset = 10; yOffset = 30; $("a.preview").hover( function(e) { this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='preview'><img src='" + this.href + "' 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(); } ); $("a.preview").mousemove(function(e) { $("#preview").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px"); }); }; //调用 $(document).ready(function() { imagePreview(); });
以下为css代码:
#preview{ position:absolute; border:1px solid #ccc; background:green; padding:5px; display:none; color:#fff; }
以下为html代码:
<a href="http://www.google.cn/landing/cnexp/google-search.png">技术分享,技术交流,小涛与您共同成长</a>
友情提示:写js代码的时候。别忘了引用jq库!
技术分享,技术交流,小涛与您共同成长