1

所以我在一个个人网站上工作，并且在定位方面遇到了一些问题。

http://i.imgur.com/tFvvnFN.png

理想情况下，这就是我希望网站的样子。但是，现在，每当调整窗口大小时，从主中心图像弹出的按钮都不会保留。我解决此问题的想法是将所有内容设置为 1,000 像素窗口，然后具有在加载时触发的功能，并且在调整大小时将按钮（“调整大小” - 1000）像素向左移动。

如果有人可以帮助使其工作，或者指出这些代码出错的地方，我将非常感激。

相关的 HTML；

<div class = "mobile">
    <div id= "titlehead">
        <img src = "./images/Tilehead.png" alt="headtitle">
    </div>
    <div id= "illustrationb">
        <a href = "Illustrations.html">
            <img src = "./images/IllustrationBanner.png" 
            onmouseover="this.src='./images/Bannerc-1.png'" 
            onmouseout="this.src='./images/IllustrationBanner.png'"></a>
    </div>
    <div id= "aboutb">
        <a href = "Illustrations.html">
            <img src = "./images/Banner-4.png" 
            onmouseover="this.src='./images/Bannerc-4.png'" 
            onmouseout="this.src='./images/Banner-4.png'"></a>
    </div>
    <div id= "photob">
        <a href = "Illustrations.html">
            <img src = "./images/Banner-3.png" 
            onmouseover="this.src='./images/Bannerc-2.png'" 
            onmouseout="this.src='./images/Banner-3.png'"></a>
    </div>
    <div id= "infob">
        <a href = "Illustrations.html">
            <img src = "./images/Banner-2.png" 
            onmouseover="this.src='./images/Bannerc-3.png'" 
            onmouseout="this.src='./images/Banner-2.png'"></a>
    </div>
</div>

jQuery;

$(document).ready(function){
    var $xMove = window.width - 1000
    var $mobile = $('.mobile')
    if(window.width > 1000){
        $($mobile).animate({
            left: "+=" + $xMove
        })
    }
}
$(window).resize(function){
    var $xMove = window.width - 1000
    var $mobile = $('.mobile')

    if(window.width > 1000){
        $($mobile).animate({
            left: "+=" + $xMove 
        })
    }
}
4

2 回答 2

0

图像是静态尺寸吗？如果是这样，将其包装在一个 div 中，将位置设置为相对，并绝对定位按钮。

如果您创建一个 JS 小提琴，我可以通过示例向您展示。

于 2013-09-28T08:49:30.877 回答
0 
$(document).ready(function(){
    $(window).on('resize', function(){
        var windowsize = $(window).width();
          if (windowsize > 1000)
          {
              //do this
              //do that..
          }
          else
          {
              //do this
              //do that..
          }
    });
});
于 2013-09-28T07:21:36.803 回答