在屏幕上調整div大小

因此，我有我昨天開始的這個頁面。它將頁面中心的div從鼠標移開。一切正常，直到我調整頁面。直到我移動鼠標，div纔會回到中心位置。在屏幕上調整div大小

我試過在屏幕上調整大小，但似乎無法得到它的工作，所以我颳了它。我對JS和Jquery比較陌生，所以我需要一個正確的方向。

這是我正在處理的網站。 http://afrohorse.netau.net/我知道這是不好的做法，但爲了本頁的目的，我將CSS和JS都放在一個頁面中，這樣人們可以右鍵單擊 - >查看源代碼，因爲我無法獲得JSFiddle的工作。

在此先感謝您，如果您需要澄清，請告訴我！ :)

編輯以添加代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>qwerty</title>  
     <script src="jQuery.js"></script> 
     <style type="text/css"> 

     body { 
      background-image:url('cloud.jpg'); 
      background-repeat:repeat; 
     } 

     .box { 
      background-image:url('trans.png'); 
      background-repeat:repeat; 
      width: 500px; 
      height: 200px; 
      position: absolute; 
      margin:100px -250px -100px 250px; 
      bottom:50%; 
      right:50%; 
      -webkit-border-radius: 15px 15px 15px 15px; 
      border-radius: 15px 15px 15px 15px; 
      -webkit-box-shadow:inset 2px 2px 20px 1px #E0D9D9; 
      box-shadow:inset 2px 2px 20px 1px #E0D9D9; 

     } 
     </style> 

       <script type="text/javascript"> 
      $(document).ready(function(){ 
      $(window).mousemove(function(e){ 
      var x = e.pageX-window.innerWidth/2; 
      if (x <= 400) { 
       x2=x*0.01 
       x3=x2+window.innerWidth/2 
       $('div.box').css({'right': x3}); 
      } 
      var y = e.pageY-window.innerHeight/2; 
      if (y <= 400) { 
       y2=y*0.01 
       y3=y2+window.innerHeight/2 
       $('div.box').css({'bottom': y3}); 
      } 
     }); 
    }); 

     </script> 


    </head> 
    <body> 
     <div class="box"></div> 

    </body> 
</html>

來源

2014-02-11 Mathew MacLean

添加代碼也！ –

請包括您的代碼。 – helderdarocha

@MateiMihai Code已添加！ –

您需要設置的東西中心的內容，作爲窗口大小：

$(window).resize(function() { 
    $('div.box').css({'right': parseInt(window.innerWidth/2), 
         'bottom': parseInt(window.innerHeight/2) 
        }); 
});

來源

2014-02-11 12:34:23 ojovirtual

這個答案很完美！我會盡快將它標記出來！謝謝！ –

+1，看起來像只有一個閱讀的問題lol – Askanison4

很高興能有所幫助。 – ojovirtual

添加CSS代碼中的

.box{ 
position:absolute; 
left:0; 
right:0; 
}

這會使你的DIV在中心由右至左。使用您當前使用的其他css。

來源

2014-02-11 12:33:02 Sushan

div以頁面加載爲中心。在頁面/窗口大小調整後，我需要讓它自己重新定位。 –

首先嚐試以上CSS和評論:) – Sushan

我已經有它與我的CSS中心。你的CSS做了一些我已經完成的事情。 –

你嘗試使用https://api.jquery.com/resize/了嗎？這應該讓你重新調整你的div的大小。

來源

2014-02-11 12:35:01

我剛纔提到我嘗試過，但一定是做錯了。我是新來的jQuery和JavaScript。 –

替代（不結合至window.resize事件）來強制一個浮動DIV重新中心本身，當瀏覽器窗口被調整大小

而不結合到window.resize事件

jQuery.fn.center = function() { 
    var container = $(window); 
    var top = -this.height()/2; 
    var left = -this.width()/2; 
    return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' }); 
}

用法：

$('#mydiv').center();

來源

2014-02-11 12:38:26 newTag

我已經讓它居中。我需要它重新調整窗口大小。不過謝謝。 –

@MathewMacLean我已更新它。看看它是否有幫助.. – newTag

是的，這也適用，但我已經接受了答案。:) –

，您可以嘗試像this jsfiddle

function moveBox(e) { 
    if (e === undefined) { 
     e = { pageX: 0, pageY: 0 } 
    } 

    var x = e.pageX-window.innerWidth/2; 
    if (x <= 400) { 
     x2=x*0.01 
     x3=x2+window.innerWidth/2 
     $('div.box').css({'right': x3}); 
    } 
    var y = e.pageY-window.innerHeight/2; 
    if (y <= 400) { 
     y2=y*0.01 
     y3=y2+window.innerHeight/2 
     $('div.box').css({'bottom': y3}); 
    } 
} 
$(document).ready(function(){ 
    $(window).mousemove(function(e){ 
     moveBox(e); 
    }); 

    $(window).resize(function(){ 
     moveBox(); 
    }); 
});

來源

2014-02-11 12:40:39

你的回答也是正確。 :) –

在屏幕上調整div大小

回答

相關問題