完全可定制的布局？答案

【问题标题】：Fully customizable layout?完全可定制的布局？
【发布时间】：2011-07-05 02:22:32
【问题描述】：

是否可以制作完全可定制的网站布局？如果可能的话，最好在 javascript/dhtml 中。我正在制作一个鼹鼠游戏，我希望用户能够定位鼹鼠从网页上任何地方出来的孔。我当前的代码很草率，因为我只是在尝试如何做到这一点，但我当前的代码是

<html>

<body>

<!--CURSOR-->
<style type="text/css">
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur),
progress;}
</style>

<!--BACKGROUND-->
<body background = "http://i52.tinypic.com/34e9ekj.jpg">

<!--COUNTER(needs to be implemnted)-->
<b><center><font size="5"><div id='counter'>0</div></font></center><b>

<!--TITLE-->
<b><center><i>Whack-A-Mole</i> - by Steven</center></b>

<!--HOLE IMAGES START HERE-->

<!--Hole 1 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:3px;position:absolute"/>

<!--Hole 2 Row 1-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:350px;margin-top:3px;position:absolute"/>

<!--Hole 3 Row 1-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:3px;position:absolute"/>

<!--Hole 4 Row 2-->
<img src="http://i51.tinypic.com/sxheeo.gif" style="margin-left:33px;margin-top:160px;position:absolute"/>

<!--Hole 5 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:160px;position:absolute"/>

<!--Hole 6 Row 2-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:160px;position:absolute"/>

<!--Hole 7 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:33px;margin-top:310px;position:absolute"/>

<!--Hole 8 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:350px;margin-top:310px;position:absolute"/>

<!--Hole 9 Row 3-->
<img src ='http://i51.tinypic.com/sxheeo.gif' style="margin-left:700px;margin-top:310px;position:absolute"/>
<!--HOLE IMAGES END HERE-->

<!--MOLE DIVS START HERE-->

<!--Mole 1 Row 1-->
<div id="randomdiv1" 
class="mole">
<img src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 2 Row 1-->
<div id="randomdiv2" 
class="mole">
<img id="Mole1" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 3 Row 1-->
<div id="randomdiv3" 
class="mole">
<img id="Mole2" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:3px;position:absolute"/>
</div>

<!--Mole 4 Row 2-->
<div id="randomdiv4" 
class="mole">
<img id="Mole3" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:33px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 5 Row 2-->
<div id="randomdiv5" 
class="mole">
<img id="Mole4" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 6 Row 2-->
<div id="randomdiv6" 
class="mole">
<img id="Mole5" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:160px;position:absolute"/>
</div>

<!--Mole 7 Row 3-->
<div id="randomdiv7" 
class="mole">
<img id="Mole6" src="http://i56.tinypic.com/2i3tyw.gif" style="margin-left:33px;margin-top:310px;position:absolute"/>
</div>

<!--Mole 8 Row 3-->
<div id="randomdiv8" 
class="mole">
<img id="Mole8" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:350px;margin-top:310px;position:absolute"/>
</div>

<!--Mole 9 Row 3-->
<div id="randomdiv9" 
class="mole">
<img id="Mole9" src ='http://i56.tinypic.com/2i3tyw.gif' style="margin-left:700px;margin-top:310px;position:absolute"/>
</div>
</body>

<!--MOLE DIVS END HERE-->

<head>

<script type="text/javascript" language="JavaScript">

<!--
// Type the number of div containers to randomly display below.

NumberOfDivsToRandomDisplay = 9;

var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
   var ck = 0;
   var cookiebegin = document.cookie.indexOf(CookieName + "=");
   if(cookiebegin > -1) {
      cookiebegin += 1 + CookieName.length;
      cookieend = document.cookie.indexOf(";",cookiebegin);
      if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
      ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
      }
   while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
   document.cookie = CookieName + "=" + r;
   }
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
   document.getElementById("randomdiv"+i).style.display="none";
   }

<!--Make counter +1 on mole click-->

document.getElementById("randomdiv"+r).onclick = function() {
            counter.innerHTML = parseInt(counter.innerHTML) + 1;
        }
document.getElementById("randomdiv"+r).style.display="block";
}

<!--Make moles pop up randomly on a timer-->
DisplayRandomDiv()
setInterval("DisplayRandomDiv()",(Math.random()*500) + 1000);
//-->
</script>

</head>

</html>

我不确定这是否可能，但嗯，不妨问问。 :) 谢谢！

【问题讨论】：

标签： javascript css customization dhtml

【解决方案1】：

是的，这是可能的。您可以在页面上放置一堆元素，然后将它们绝对放置在您想要的任何位置。您必须注意 z-index 问题，以确保您的痣位于顶部且易于敲击。

您希望为每个鼹鼠孔赋予一个（唯一的）id 属性，以使它们易于引用。然后，您只需将它们设置为 position:absolute 并添加 top 和 left CSS 属性即可将它们放在您想要的位置。顺便说一句，绝对定位元素的边距don't do anything useful because：

它完全从正常流程中移除（它对后面的兄弟姐妹没有影响）。一个绝对定位的盒子为正常流子和绝对（但不是固定）定位的后代建立一个新的包含块。但是，绝对定位元素的内容不会围绕任何其他框流动。

所以去掉边距并使用top 和left 将<img> 元素放在您想要的位置。

您可能希望使用 JavaScript 来定位您的漏洞，这样可以更轻松地考虑不同的页面大小。

【讨论】：

我有点明白你的意思，但这真的会允许最终用户将洞拖到他们想要的地方吗？
@Steven：您对使用 jQuery-UI 或类似库有何感受？我不建议手动进行拖放。用于拖放的 jQuery-UI、用于跟踪事物的 cookie 以及正确的 CSS 定位应该可以完成工作。