//使用方法//$(function () { setFloatBackgroundByID("adplay"); });//$(window).resize(function () { setFloatBackgroundByID("adplay"); });function setFloatBackgroundByID(id){ var $objId=$("#"+id);//整张大图片的id $objId.css({"overflow":"hidden","position":"relative"}); var $html=$("<div class=\"flow\" style=\"width:"+$objId.width()+"px;height:"+$objId.height()+"px;left:0;top:0;display:none;position:absolute;opacity:0.5;z-index:1\">"); $objId.children().each(function(){ //为了防止append重复添加 if (!$objId.is(‘:has(".flow")‘) ) { $objId.append($html); } }) var $mainImg=$objId.css("background-image"); //获取大图的url地址 var $divEach=$("div",$objId).not(".flow"); $divEach.css({"position":"absolute","overflow":"hidden","z-index":"100"}); $divEach.each(function(){ var $this=$(this); $(this).css({"left":parseInt($this.attr("top"))+"px","top":parseInt($this.attr("left"))+"px"}); $(this).hover(function(){ var top=parseInt($(this).css("top"))+"px"; //定位 var left=parseInt($(this).css("left"))+"px"; var $Img=$mainImg + " -" + top + " -" + left; //注意top和left前面必须有一个空格,否则显示失败 //$this.css("background","none"); $html.css("display",""); $this.css({"background":$Img}); },function(){ $html.css("display","none") $divEach.css("background","none"); }) })}下面是html代码//<div style="width: 960px; height: 508px; background: url(pic/swhw.jpg); overflow: hidden;" id="swimgbox">// <a href="http://www.fsmjj.com/Product/Furniture/0a714b5c22144620815afc82b6069be0.shtml" target="_blank">// <div style="width: 190px; height: 160px;" top="0" left="0">// </div>// </a><a href="http://www.fsmjj.com/Product/Furniture/18ea613c68af47ab9370a2886c3be9b4.shtml" target="_blank">// <div style="width: 190px; height: 160px;" top="0" left="196">// </div>// </a>//</div>
时间: 2024-10-27 19:54:09