您的位置：首页 > 其它

zIndex叠层

2013-12-16 19:41 92 查看

//今天遇到一个很纠结的问题，一张图片，鼠标移上去，有另外一张半透明图片浮在原来那张图表层，且没有覆盖原图，由于是

//半透明，所以可以看到底层图片,移开的时候，还原为原图。半透明的时候，可以超链接。纠结了一个1个小时，终于得出结果了。以下是源码。哈哈。

<!DOCTYPE HTML>

<html>

<head>

  <title>OverPicture</title>

  <style>

   #c,#con{

    height:100px;

    width:100px;

    border:1px solid orange;

   }

  </style>

</head>

<body>

    说明：每张图片一个div容器，调用的时候传当前对象和一个容器过去，如下所示：

    <div id="con" >

           <img src="e.gif" onmouseover="picOver(this,'con','www.baidu.com')" />

    </div>

    <div id="c">

           <img src="e.gif" onmouseover="picOver(this,'c','www.sina.cn')" />

    </div>

</body>

</html>

<script>

function picOver(obj,who,url){

     obj.style.position="absolute";

     obj.style.zIndex=-1;  //设置底层

     var pic=document.createElement("img"); //创建一个一个表面浮动层

     pic.src="a2.gif";   //设置浮动层的图片路径

     pic.style.position="absolute";

     pic.style.zIndex=1;     //设置浮动到表面

     pic.style.opacity=0.6;  //设置透明度

     document.getElementById(who).appendChild(pic);  //添加到谁里面

     //给表层的图片绑定鼠标移开事件

     pic.onmouseout=function(){

       obj.style.position="";   //注意：这个一定要写：目的是清空绝对定位，以防影响其他div

       document.getElementById(who).removeChild(pic);  //删除表面层

     }

     pic.onclick=function(){

          alert("要链接的url页面："+url);

          location.href=url;

     }

}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 叠层 zindex

相关文章推荐

新的分享

章节导航