页面只需要包含 jquery库, bigpic.js 和 bigpic.css即可自动给页面上符合条件的图片加上悬停效果.<script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="bigpic.js"></script><link rel="stylesheet" href="bigpic.css" type="text/css" />如果某个图片需要显示大图:<img src="images/shoe1_small.jpg" bigpic="images/shoe1_big.jpg"/>只需要添加一个 "bigpic" 属性即可.bigpic.js 内容如下.[javascript]jQuery(function(){ jQuery("img").each(function(i){ var p = jQuery(this); var strbp = p.attr("bigpic"); if(strbp){ var bp = jQuery("<div class='bigpic'></div>").appendTo("body").hide(); var w = this.width; p.mouseover(function(){ bp.fadeIn(); var offset = p.offset(); bp.css("top", offset.top).css("left", offset.left+w+5); if(bp.html()=="") bp.html("<img src=""+p.attr("bigpic")+"" mce_src=""+p.attr("bigpic")+"">"); }).mouseout(function(){ bp.fadeOut(); }); } }); }); bigpic.css 内容:[css].bigpic { position:absolute; float:left; border:#ccc 1px solid; }
