Question

是否可以制作完全可自定义的网站布局？最好是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>

我不确定它是否可能，但是，好吧，不妨问。 :) 谢谢！

Answer 1

是的，有可能。您可以在页面上抛出一堆元素，然后将它们绝对放在您想要的任何位置。你必须注意z-index问题，以确保你的痣是最重要的，并且是可以攻击的。

你想给每个鼹鼠洞一个（唯一的）id属性，以便于参考。然后，您只需将它们设置为position:absolute并添加top和left CSS属性，将它们放在您想要的位置。 BTW，绝对定位元素的边距don't do anything useful because：

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

因此，请删除边距并使用top和left将<img>元素放在您想要的位置。

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

完全可定制的布局？

1 个答案: