购物网--放大镜

Posted 2020-11-01 shenroom

啥也不说先预览一下：http://shenroom888.gitee.io/magnify

源码下载：https://gitee.com/shenroom888/magnify.git

上代码了：

.content {  margin:100px auto;width:1200px;  }
#min  { width: 1200px; height:645px; background-color: #EEE;padding: 10px;position: relative;float:left;}
#minbox {  width: 500px;height: 500px;position: relative;}
#minbox img {  width:100%;border:1px solid white;}
#maxbox {  width: 645px;height: 645px;position: absolute;left: 520px;top:10px;overflow: hidden;}
#maxbox img {  width: 166.7%;position: absolute;}
#show {  width:500px;height:130px;background:white;margin-top:15px;}
#show li {  list-style: none;float:left;height:100px;margin-left:18px;margin-top:15px;}
#show img {  height:100%;border:1px solid white;}
#meng {  width: 300px;height: 300px;position: absolute;background-color:yellow;opacity:0.4;filter:alpha(opacity=40);left: 0;top: 0;display: none;}
.mage {  float:left;height:600px;background:grey;}

 

<div class="content">
    <div id="min">
        <div id="minbox">
            <img src=""  alt="">
            <p id="meng"></p>
        </div>
        <div id="maxbox">
            <img src=""  alt="">
        </div>
        <div id="show">
            <ul>
                <li><img src="images/001.jpg" alt=""></li>
                <li><img src="images/002.jpeg" alt=""></li>
                <li><img src="images/003.gif" alt=""></li>
                <li><img src="images/004.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="mage">
    </div>
</div>