jQuery 仿淘宝 鼠标悬停显示大图效果

页面只需要包含 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 仿淘宝 鼠标悬停显示大图效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。