购物网--放大镜

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>


以上是关于购物网--放大镜的主要内容,如果未能解决你的问题,请参考以下文章

前端特效-Javascript实现购物页面图片放大效果

记录-JS简单实现购物车图片局部放大预览效果

简单购物放大镜分享

购物查看放大

android - 离开应用程序时保持谷歌地图片段在位置上放大

js+css+html实现放大镜效果