Question

我正在开发一个信息图，在图像上方有几个浮动按钮。到目前为止，没有问题，我让所有这些都绝对定位，一切都应该有效。

但是，信息图表缩放到不同的窗口大小非常重要。我设法让图像完美缩放，但绝对定位的按钮放错了位置。

是否有解决此问题的标准“响应式网页设计方式”？现在，我唯一能想到的是获取图像缩小的程度，并将此因素应用于使用Javascript的所有浮动按钮的位置和大小。

编辑：发布一些代码。

这是我的HTML：

<div class="main">

    <img src="imgs/01_negimpacto.gif"></img>

    <div class="bt bt-pag" id="pag02"></div>
    <div class="bt bt-pag" id="pag03"></div>
    <div class="bt bt-pag" id="pag04"></div>
    <div class="bt bt-pag" id="pag05"></div>
    <div class="bt bt-pag" id="pag06"></div>

    <img id="img-pag02" class="pag" src="imgs/01_pag02.png"></img>
    <img id="img-pag03" class="pag" src="imgs/01_pag03.png"></img>
    <img id="img-pag04" class="pag" src="imgs/01_pag04.png"></img>
    <img id="img-pag05" class="pag" src="imgs/01_pag05.png"></img>            
    <img id="img-pag06" class="pag" src="imgs/01_pag06.png"></img>

    <div class="bt" id="xis"></div>
</div>

这是我的CSS文件：

.main {
    height: 100%;
    width: 100%;
}

.main img {
    max-width: 100%;
    position: absolute;
}

.pag {
    visibility: hidden;
}

.bt {
    cursor: pointer;
}

#xis {
    position:absolute;
    left:310px;
    top:0px;
    width:40px;
    height:37px;
}

#pag02 {
    position:absolute;
    left:237px;
    top:106px;
    width:31px;
    height:31px;
}

#pag03 {
    position:absolute;
    left:12px;
    top:187px;
    width:31px;
    height:32px;
}

#pag04 {
    position:absolute;
    left:12px;
    top:267px;
    width:31px;
    height:32px;
}

#pag05 {
    position:absolute;
    left:12px;
    top:337px;
    width:31px;
    height:32px;
}

#pag06 {
    position:absolute;
    left:12px;
    top:422px;
    width:31px;
    height:32px;
}

.bt-pag div是切换img对应项可见性的按钮。 #xis是一个隐藏任何可见图像的按钮。这是我目前用来调整大小和重新定位所有内容的javascript：

if($(window).width() < maxWidth)
{
    var prop = $(window).width() / maxWidth;

    $(".bt").each(function(i) {
        $(this).css("top", $(this).position().top * prop);
        $(this).css("left", $(this).position().left * prop);
        $(this).css("width", $(this).width() * prop);
        $(this).css("height", $(this).height() * prop);
    });
}

maxWidth是背景图像的最大尺寸（350px）。

响应式Web应用程序与浮动按钮

0 个答案: