遮罩层(鼠标移到指定区域时,该区域显示,其他地方为半透明,移动时全部显示)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了遮罩层(鼠标移到指定区域时,该区域显示,其他地方为半透明,移动时全部显示)相关的知识,希望对你有一定的参考价值。
//使用方法
//$(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>
以上是关于遮罩层(鼠标移到指定区域时,该区域显示,其他地方为半透明,移动时全部显示)的主要内容,如果未能解决你的问题,请参考以下文章