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

總結

以上是生活随笔為你收集整理的jQuery 仿淘宝 鼠标悬停显示大图效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。