完全可自定义的布局？

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

我不知道，如果它甚至有可能或没有，但咩，不妨问。 :) 谢谢！

来源

2011-07-05 Steven

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

你想给每个鼹鼠洞一个（唯一的）id属性，使他们很容易引用。然后，您只需将它们设置为position:absolute并将top和left CSS属性添加到您想要的位置。顺便说一句，在绝对定位元素don't do anything useful because边距：

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

因此摆脱利润率和使用top和left把您想要的地方你<img>元素。

您可能想使用JavaScript来定位您的洞，这将更容易考虑不同的页面大小。

来源

2011-07-05 02:41:53

我有点得到你的意见，但实际上是否允许最终用户拖动他们想要的洞？ – Steven

@Steven：您对使用jQuery-UI或类似的库感觉如何？我不会推荐用手拖动。用于drag'n'drop的jQuery-UI，用于跟踪事物的Cookie以及恰当的CSS定位应该能够完成工作。 –

完全可自定义的布局？

回答

相关问题