使用Javascript在屏幕上定位元素

Question

我正在尝试使用Javascript将我的某些元素放置在屏幕/窗口上。 我这样做是为了确保无论用户屏幕的尺寸如何，我的元素始终处于中心位置。

我知道padding和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>

Answer 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';

Answer 2

“您能否建议一行可以正确放置我的元素的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");
}

使用Javascript在屏幕上定位元素

问题描述

2 个解决方案

解决方案1
1 2011-04-11 05:54:21

解决方案2
0 2011-04-12 08:18:00

使用Javascript在屏幕上定位元素

问题描述

2 个解决方案

解决方案1 1 2011-04-11 05:54:21

解决方案2 0 2011-04-12 08:18:00

解决方案1
1 2011-04-11 05:54:21

解决方案2
0 2011-04-12 08:18:00