码迷,mamicode.com
首页 > 其他好文 > 详细

购物网--放大镜

时间:2018-04-26 13:22:03      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:lte   spl   max   auto   top   roo   lan   com   ref   

啥也不说先预览一下: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>


购物网--放大镜

标签:lte   spl   max   auto   top   roo   lan   com   ref   

原文地址:https://www.cnblogs.com/shenroom/p/8951710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!