Question

我使用了link中的magnify zoom in。

我想改变显示缩放图像的div的位置，我希望它显示在小图像的底部，因为我在主体中使用了带有bootstrap和overflow-x:hidden的响应式设计，当我缩小浏览器时，小成像剪切：/。谁能帮我？对不起我非常糟糕的英语

的CSS：

div.jqZoomTitle
{
z-index:5000;
text-align:center;
font-size:11px;
font-family:Tahoma;
height:16px;
padding-top:2px;
position:absolute;
top: 0px;
left: 0px;
width: 100%;
color: #FFF;
background: #999;

}

 .jqZoomPup
  {
    overflow:hidden;
    background-color: #FFF;
    -moz-opacity:0.6;
    opacity: 0.6;
    filter: alpha(opacity = 60);
    z-index:10;
    border-color:#c4c4c4;
    border-style: solid;
    cursor:crosshair;
   }

   .jqZoomPup img
   {
    border: 0px;
    }

.preload{
-moz-opacity:0.8;
opacity: 0.8;
filter: alpha(opacity = 80);
color: #333;
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid #CCC;
background-color: white;
padding: 8px;
text-align:center;
background-image: url(~/Images/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
width:90px;
* width:100px;
height:43px;
*height:55px;
z-index:10;
position:absolute;
top:3px;
left:3px;

 }

  .jqZoomWindow
{
border: 1px solid #999;
background-color: #FFF;
}

Html：

<html>
<head>
 <title>JQzoom Demo</title>
 <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
 <script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

 <link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
 <style type"text/css">
  div.notes{
    font-size:12px;
        }
   div.notes a{
   color:#990000;
     }

    </style>
    <script type="text/javascript">

     $(function() {
           $(".jqzoom").jqzoom();
           });
         </script>
       </head>

   <body>
    <div id="content" style="margin-top:100px;margin-left:100px;">
 <a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki"> 
    <img src="kawasakigreen_small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
   </a>

Answer 1

jqZoom具有定位div的属性。

位置字符串

默认值：右键 - 弹出窗口position.Admitted值：'right'，'left'，'top'，'bottom'

供参考 http://www.myjqueryplugins.com/jquery-plugin/jqzoom

Answer 2

这是因为它的位置是绝对的。所以要实现响应式布局，即设备的宽度较小，即

@media(max-width: 768px){.jqZoomWindow{position:relative !important;}}

使它处于相对位置。

这就是所有人。

如何将div的位置改为底部？

2 个答案: