购物网--放大镜
Posted shenroom
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了购物网--放大镜相关的知识,希望对你有一定的参考价值。
啥也不说先预览一下: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>
以上是关于购物网--放大镜的主要内容,如果未能解决你的问题,请参考以下文章