Question

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

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

理想情况下，这就是我希望网站看起来像的样子。但是，现在，无论何时调整窗口大小，弹出主中心图像的按钮都不会保留。我想解决这个问题的方法是将所有内容设置在1,000px窗口，然后设置一个在加载时触发的功能，每当调整大小时，按钮（'resized size' - 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 
        })
    }
}

Answer 1

$(document).ready(function(){
    $(window).on('resize', function(){
        var windowsize = $(window).width();
          if (windowsize > 1000)
          {
              //do this
              //do that..
          }
          else
          {
              //do this
              //do that..
          }
    });
});

Answer 2

图片是静态尺寸吗？如果是这样，将它包装在div中，将位置设置为relative，并绝对定位按钮。

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

在窗口调整大小时动画多个Div

2 个答案: