为我的页面创建网格外观的最有效的方法
Most efficient way to create a grid-look for my page
我想在我的页面上创建一个由非常非常小的盒子组成的网格-(例如,2像素的高度和宽度,或2x2)。我有过一些关于如何做到这一点的想法-所有这些都以这样或那样的方式失败了:
- PHP使用echo语句
- Javascript -目前为止我最好的选择
- 手动构建网格以适应800 x 800的空间(将花费太长时间)。
不幸的是,即使是我最好的选择也相当慢。有没有人有一个更好的计划,让我如何以一种有效的方式创建一个由小正方形组成的网格?
这适用于我(grid.gif是3x3带边框,见http://stuff.drnet.at/stackoverflow/grid/工作版本):
<html><head>
<script language="JavaScript">
function mm (e) {
if (!e) e=window.Event;
var o=document.getElementById('grid');
var x=e.clientX-o.offsetLeft;
var y=e.clientY-o.offsetTop;
document.getElementById('coords').innerHTML=''+x+'/'+y;
}
</script>
</head>
<body onload="document.getElementById('grid').onmousemove=mm;">
<div id="grid" style="position:absolute; left:10px; top:10px; width:800px; height:600px; background: url(grid.gif) repeat left top; border:1px solid black; padding:0px; margin:0px;"></div>
<div id="coords" style="position:absolute; left:10px; top:620px;"></div>
</body>
</html>
用FF &
在2x2网格上,我很确定您不会显示任何数据。即使你是,我认为它不会在每个网格框内。
所以,你应该在你的图像程序中创建一个2x2(或3x3, 1像素边框)的图像,并创建一个div
,你想要"网格化",并给div一个background
.gridify {
background: url(image/grid.jpg) repeat left top;
}
其中grigrify是div/span/其他类。
进一步编辑现在,既然你想点击拖动来选择一个区域,你能做的就是尝试在.gridify
div的顶部创建一个div,并给新的"点击拖动"div一个更暗和透明的背景…这会给人一种框被选中的错觉。
下面是一些PHP代码来打印网格:
<?php
$size = 5;
$total = 100;
?>
<html>
<head>
<style>
.box {
width:<?php echo $size; ?>px;
height:<?php echo $size; ?>px;
float:left;
}
.black {
background-color:black;
}
.white {
background-color:white;
}
</style>
</head>
<body>
<?php
echo "<div style='width:{$total}px;height:{$total}px;'>'n";
$start_color = true;
for($i = 1; $i <= floor($total/$size); $i++) {
$start_color =! $start_color;
$current_color = $start_color;
for($j = 1; $j <= floor($total/$size); $j++) {
echo "<span class='box ".(($current_color) ? 'black' : 'white')."' id='box_{$i}_{$j}'></span>'n";
$current_color =! $current_color;
}
}
echo "</div>";
?>
</body>
</html>
你可以看看砌体jQuery插件。不幸的是,它的目标是重新排列和动画网格布局,而不是打印一个微小的2d布局,但它可能会有所帮助。它还可以为每个块或单元定义一个函数。它的算法类似于装箱。
相关文章:
- 在jQuery中创建向下滑动子菜单的最有效方法
- 使用Underscore.js修改json数组中所选元素的更有效方法
- 选择具有值数组的所有元素的最有效方法
- 将JSON存储和恢复到此Ionic应用程序的最有效方法
- 将javascript数组中的项移动到特定位置的有效方法
- 将JS对象数组转换为嵌套形式的最有效方法
- 隐藏具有特定类$.each、for等的元素的有效方法
- 什么's是调用具有可变参数的函数的有效方法
- 选择具有特定数据的所有 html 标记的最有效方法是什么 - [适当性],无论值如何
- 使用 jQuery 调用 PHP 端点的最有效方法
- 这是解析 Int 的有效方法吗?
- 在JavaScript中搜索数组映射的最有效方法
- 获取字符串中最后一个换行符的最有效方法是什么
- 什么's是在两个(或多个)阵列中找到匹配的细胞序列的最有效方法
- 什么's是在IE8+中添加元素的最有效方法
- 从任何jquery选择器字符串创建元素的最有效方法
- 在日期范围内查找丢失日期的最有效方法是什么
- 对区间[1,10^12]中的整数进行编码/解码的快速有效方法是什么
- 在条件(if)结构的条件语句中是否有定义变量的有效方法
- 在ASP.NET中使用JQuery UI自动完成的有效方法