我正在尝试使用Javascript将一些元素放在屏幕/窗口上。我这样做是为了确保用户屏幕的尺寸,我的元素始终位于中心。
我知道填充& margin也可以实现这一点,但我使用的是一个名为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>
答案 0 :(得分:1)
您没有正确设置left
和top
属性,您需要为像素添加单位,例如'px'。
document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i] + 'px';
document.getElementById("block"+i).style.top = BLOCK_POS_Y[i] + 'px';
答案 1 :(得分:0)
“你能建议一行可以正确放置我的元素的jQuery代码吗?”
以下代码使用jQuery,并将在加载和窗口大小调整时将绝对定位的元素居中。
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");
}