0

我必须让这些框执行以下操作：沿着页面的左侧有许多框，其中包含不同的字体名称。当您单击这些框时，中间框中的文本字体会发生变化。对页面右侧和底部进行类似的框组更改。

这是我到目前为止的编码：

 <html>
  <head>
    <title>Boxes on Boxes on Boxes</title>
    <style type="text/css">
#box_group1, #box_group2, #box_group3, #box_group4, #textbook {
    position:absolute;
    left:100px;
    top:100px;      
}
#box1, #box2, #box3, #box10, #box11, #box12 {
    padding:5px;
    width:50px;
    height:50px;
    float:left;
}
#box4, #box5, #box6, #box7, #box8, #box9 {
    padding:5px;
    width:50px;
    height:50px;
}   
#box1, #box4, #box7, #box10{
    background-color:orange;
}
#box2, #box5, #box8, #box11 {
    background-color:blue;
}
#box3, #box6, #box9, #box12{
    background-color:green;
}
#textbook {
    padding: 5px;
    background-color:red;
}
    </style>
    <script language="JavaScript">
        width=window.innerWidth;
        height=window.innerHeight;
    function boxes() {  
        document.getElementById("box_group1").style.left=(width-document.getElementById("box_group1").offsetWidth)/2;
        document.getElementById("box_group2").style.top=(height-document.getElementById("box_group2").offsetHeight)/2;
        document.getElementById("box_group3").style.left=width-100;100-document.getElementById("box_group3").offsetWidth;
        document.getElementById("box_group3").style.top=(height-document.getElementById("box_group3").offsetHeight)/2;
        document.getElementById("box_group4").style.left=(width-document.getElementById("box_group4").offsetWidth)/2;
        document.getElementById("box_group4").style.top=height-100;100-document.getElementById("box_group4").offsetHeight;  
        document.getElementById("textbook").style.left=(width-document.getElementById("textbook").offsetWidth)/2;
        document.getElementById("textbook").style.top=(height-document.getElementById("textbook").offsetHeight)/2;
    }
    </script>
  </head>
  <body onload="boxes()">
    <div id="box_group1">
        <div id="box1">
            First box 
        </div>

        <div id="box2">
            Second box
        </div>

        <div id="box3">
            Third box
        </div>
    </div>
    <div id="box_group2">
        <div id="box4">
            Fourth box 
        </div>

        <div id="box5">
            Fifth box
        </div>

        <div id="box6">
            Sixth box
        </div>
    </div>
    <div id="box_group3">
        <div id="box7">
            Seventh box 
        </div>

        <div id="box8">
            Eighth box
        </div>

        <div id="box9">
            Ninth box
        </div>
    </div>
    <div id="box_group4">
        <div id="box10">
            Tenth box 
        </div>

        <div id="box11">
            Eleven box
        </div>

        <div id="box12">
            Twelve box
        </div>
    </div>
    <div id="textbook">Textbook</div>
  </body>
</html>
4

1 回答 1

0

我用更容易维护的 jQuery 完成了这项任务。使用函数来获取所需的数据并操纵它们以动态创建框。

HTML： 

<div id="topDiv"></div>

<div id="leftDiv"></div>

<div id="rightDiv"></div>

<div id="bottomDiv"></div>

CSS： 

#topDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
}


#leftDiv div{
   float : left;
    padding:5px;
    width:50px;
    height:50px;
}

#rightDiv div{
    float : right;
    padding:5px;
    width:50px;
    height:50px;
} 

#bottomDiv div{
    float : left;
    padding:5px;
    width:50px;
    height:50px;
}

#topDiv{
    padding-left : 33%;
}
#leftDiv{
    padding-top : 30%;
}
#bottomDiv{
    padding-top : 68%;
    padding-left : 33%;
}
#rightDiv{
    margin-top : -30%;
}

.changedFont{
    font-size : 20px;
}

jQuery : 

$(document).ready(function(){
//First declare an array of colors that will also indicate the number of boxes.
var colorArray = new Array("red", "green", "blue");

//Execute a loop to create the boxes styling them properly
for(var i = 1; i <= colorArray.length ; i++){
    $("#topDiv").append("<div id=Box" + i + "></div>");
    $("#Box"+ i).css("background-color", colorArray[i-1]);
    $("#Box"+i).text("Box" + i);

    $("#leftDiv").append("<div id=Box" + i+1 + "></div>");
    $("#Box"+ i+1).css("background-color", colorArray[i-1]);
    $("#Box"+ i+1).text("Box" + i+1);

    $("#rightDiv").append("<div id=Box" + i+2 + "></div>");
    $("#Box"+ i+2).css("background-color", colorArray[i-1]);
    $("#Box"+ i+2).text("Box" + i+2);

    $("#bottomDiv").append("<div id=Box" + i+3 + "></div>");
    $("#Box"+ i+3).css("background-color", colorArray[i-1]);
    $("#Box"+i+3).text("Box" + i+3);       
}

   //Define the handler for onclick events 
    $("#topDiv").children().click(function(){
        $("#topDiv").children().eq(1).css("background-color", $(this).css("background-color"));        
        $("#topDiv").children().eq(1).addClass("changedFont");
    });

     $("#leftDiv").children().click(function(){
        $("#leftDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#leftDiv").children().eq(1).addClass("changedFont");
    });

    $("#rightDiv").children().click(function(){
        $("#rightDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#rightDiv").children().eq(1).addClass("changedFont");
    });

    $("#bottomDiv").children().click(function(){
        $("#bottomDiv").children().eq(1).css("background-color", $(this).css("background-color"));
        $("#bottomDiv").children().eq(1).addClass("changedFont");
    }); 
});

jsFiddle 演示

于 2013-10-27T23:50:10.133 回答