頁面只需要包含 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;
}