1. 技术掘金
  2. 技术文章推荐
  3.  JS放大镜效果 · Web前端爱好者

 JS放大镜效果 · Web前端爱好者

JerryXia 发表于 , 阅读 (39)

HTML部分：

<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="small.jpg"/>
    </div>
    <div id="big-box">
        <img src="big.jpg"/>
    </div>
</div>
CSS部分：
* {
    margin: 0;
    padding: 0
}
#demo {
    display: block;
    width: 400px;
    height: 255px;
    margin: 50px;
    position: relative;
    border: 1px solid #ccc;
}
#small-box {
    position: relative;
    z-index: 1;
}
#float-box {
    display: none;
    width: 160px;
    height: 120px;
    position: absolute;
    background: #ffffcc;
    border: 1px solid #ccc;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
#mark {
    position: absolute;
    display: block;
    width: 400px;
    height: 255px;
    background-color: #fff;
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 10;
}
#big-box {
    display: none;
    position: absolute;
    top: 0;
    left: 460px;
    width: 400px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 1;;
}
#big-box img {
    position: absolute;
    z-index: 5
}
      

      

          
          [ 技术文章推荐 ]
      

  

  

      
          Creative Commons License
      
      本文基于
      署名 2.5 中国大陆
      许可协议发布，欢迎转载，演绎或用于商业目的，但必须保留本文署名 JS放大镜效果 · Web前端爱好者(包含链接）。