使用Javascript在屏幕上定位元素

我正在嘗試使用Javascript將一些元素放置在屏幕/窗口上。我正在這樣做，以確保用戶屏幕上的任何尺寸，我的元素將永遠在中心。使用Javascript在屏幕上定位元素

我知道填充&利潤率也能達到這個目標，但我爲了使用&稱爲raphael.js自定義腳本的運動，動我的元素，我需要絕對闡述了自己的元素（它是一個自定義主頁，在那裏你點擊塊（即鏈接）&他們飛離屏幕）。

我的javascript函數移動我的元素無法移動我的元素。任何關於如何使用javascript定位我的元素的建議將非常有幫助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="dropDownMenu.js"></script> 

    <title></title> 
    <script src="javascript/raphael.js"></script> <!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element --> 
    <script LANGUAGE="JavaScript" type = "text/javascript"> 
    <!-- 
     function getScreenSize() 
     { 
      var res = {"width": 630, "height": 460}; 

      if (document.body) 
      { 
       if (document.body.offsetWidth) res["width"] = document.body.offsetWidth; 
       if (document.body.offsetHeight) res["height"] = document.body.offsetHeight; 
      } 

      if (window.innerWidth) res["width"] = window.innerWidth; 
      if (window.innerHeight) res["height"] = window.innerHeight; 

      alert(res["width"]); 
      alert(res["height"]); 

      return res; 
     } 

     function positionBlocksAccordingToScreenSize() 
     { 
      // The problem is that the blocks position does not change but they should? 

      var scrDim  = getScreenSize(); 
      var BK_WIDTH = 800; 
      var BK_HEIGHT = 600; 
      var X_OFFSET = (scrDim["width"]-BK_WIDTH)/2; // variable that changes according to the width of the screen 
      var BLOCK_POS_X = [160, 80, 280, 20, 200, 400]; 
      var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380]; 

      for (var i=1; i<=5; i++) 
      { 
       //document.getElementById("block"+i).setAttribute("offsetLeft", X_OFFSET + BLOCK_POS_X[i]); // doesn't work 
       //document.getElementById("block"+i).setAttribute("offsetTop", BLOCK_POS_Y[i]); // doesn't work 
       document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work 
       document.getElementById("block"+i).style.top = BLOCK_POS_Y[i]; // doesn't work 
      } 
     } 

    --> 
    </script> 
    <style type="text/css" media="all"> 
     <!-- 
     @import url("styles.css"); 

     #blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px; 
        height: 600px; /*background-image: url("images/menuBk.png");*/ } 
     #bkImg  { z-index: -5; position: relative; } 

     #block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; } 
     #block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; } 
     #block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; } 
     #block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; } 
     #block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; } 
     #block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; } 

     --> 
    </style> 
</head> 

<body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;"> 

    <img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/> 
    <!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place 
     this image inside the div, because it will get erased when I call raphael.clear(); --> 
    <div id="blockMenu"> 
     <div id="block1"><a href="javascript:onBlockClick('block1')"><img src="images/block1.png" width="200" height="200"/></a></div> 
     <div id="block2"><a href="javascript:onBlockClick('block2')"><img src="images/block2.png" width="200" height="200"/></a></div> 
     <div id="block3"><a href="javascript:onBlockClick('block3')"><img src="images/block3.png" width="200" height="200"/></a></div> 
     <div id="block4"><a href="javascript:onBlockClick('block4')"><img src="images/block4.png" width="200" height="200"/></a></div> 
     <div id="block5"><a href="javascript:onBlockClick('block5')"><img src="images/block5.png" width="200" height="200"/></a></div> 
     <div id="block6"><a href="javascript:onBlockClick('block6')"><img src="images/block6.png" width="200" height="200"/></a></div> 
    </div> 

</body> 
</html>

來源

2011-04-11 Mack

如果您已經使用作爲冒險的東西作爲Raphaël，你也應該考慮usi它的朋友：[jQuery]（http://jquery.com/）。它自動處理所有醜陋的部分，比如'document.body.offsetWidth' vs'window.innerWidth'。 – thirtydot 2011-04-11 04:41:31

@ thirtydot感謝您的回覆。你能夠建議一系列的jQuery代碼，可以正確地放置我的元素？ – Mack 2011-04-11 05:29:24

你沒有正確設置left和top性能，你需要添加單元e.g「像素」的像素。

document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i] + 'px'; 
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i] + 'px';

來源

2011-04-11 05:54:21 Jonathan

「你就可以提出一個行jQuery代碼，可以正確地將我的元素？」

下面的代碼使用jQuery，並將在加載和窗口大小調整時將一個絕對定位的元素居中。

http://jsfiddle.net/Fu3L6/

HTML ...

<div id="element">Test</div>

CSS ...

#element { 
    position: absolute; 
    background-color: red; 
    width: 200px; 
}

jQuery的...


$(document).ready(function() { 

    centerInViewport('#element'); 

    $(window).resize(function() { 
     centerInViewport('#element'); 
    }); 

}); 

function centerInViewport(e) { 
    $docWidth = $(document).width(); 
    $elWidth = $(e).width(); 
    $offset = ($docWidth - $elWidth)/2; 
    $(e).css("marginLeft", $offset + "px"); 
}

來源

2011-04-12 08:18:00 wdm

這很好，除非它不適用於使用raphael創建的元素 – Jason 2011-09-06 22:00:33

您沒有使用var初始化您的變量，這使得它們都是全局的。 – 2011-10-31 14:53:15

使用Javascript在屏幕上定位元素

回答

相關問題