首页 > 代码库 > 转载4
转载4
超级简单又实用的jquery图片预览功能
2012年10月14日 ? jQuery ? 评论数 2
以下为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=http://www.mamicode.com/‘" + 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库!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。