这个问题我实在找不到对应的地方发问。就在此借宝地一用了。最近在项目中要做一个房屋租金管理的模块，客户要求按照房屋建筑图在网页上原样显示出来。以一个方格来表示一个房屋，同时用方格的背景颜色来表示该房屋的状态，如：绿色--表示已经出租，红色--表示快要到期，等由于房屋特别的多。而且分布也不是很规则。
我遇到了两个问题：
（一）200多个不规则房屋方格，我如何快速的在一个页面上显示出来。同时，他们的布局要按照建筑图摆放。
（二）怎么样实现在这个页面上能够使用鼠标滚轮来放大和缩小。相当于要查看整体，和某一个局部细节。希望你们能够给予一定的线索或是帮组。谢谢了。
我遇到了两个问题：
（一）200多个不规则房屋方格，我如何快速的在一个页面上显示出来。同时，他们的布局要按照建筑图摆放。
（二）怎么样实现在这个页面上能够使用鼠标滚轮来放大和缩小。相当于要查看整体，和某一个局部细节。希望你们能够给予一定的线索或是帮组。谢谢了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
});
// --></mce:script>
<mce:script language="JavaScript"><!--
/*function SetImgSize(img) {
var maxWidth = 300;
var maxHeight = 300;
var imgimgWidth = img.width;
var imgimgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight) {
}
else {
if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {
img.style.height = maxHeight + "px";
img.style.width = imgWidth * (maxHeight / imgHeight) + "px";
}
else {
img.style.width = maxWidth +"px";
img.style.height = imgHeight * (maxWidth / imgWidth) +"px";
}
}
}*/
function SetImgSize(img) {
var maxWidth = 300;
var maxHeight = 300;
var imgimgWidth = img.width;
var imgimgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight) {
}
else {
if((maxWidth / maxHeight) > (imgWidth / imgHeight)) {
img.style.height = maxHeight + "px";
img.style.width = imgWidth * (maxHeight / imgHeight) + "px";
}
else{
img.style.width = maxWidth +"px";
img.style.height = imgHeight * (maxWidth / imgWidth) +"px";
}
}
}
function large(){
var maxWidth = 300;
var maxHeight = 300;
var img = document.getElementById("img");
var imgimgWidth = img.width;
alert(imgWidth)
var imgimgHeight = img.height;
if(imgWidth <= maxWidth && imgHeight <= maxHeight){
//等比例
if((maxWidth / maxHeight) > (imgWidth / imgHeight)){
alert("3")
img.style.height = imgHeight*1.2 + "px";
img.style.width = imgWidth*1.2 + "px";
alert(imgHeight*2 + "px")
}else{
img.style.height = imgHeight*1.2 + "px";
img.style.width = imgWidth*1.2 + "px";
}
}else{
alert("太大了")
return;
}
}
// --></mce:script>
</head>
<body>
<img src="3.jpg" mce_src="3.jpg" id="img" /> <br />
<input type="button" value="放大" id="large" onclick="large()" />
<input type="button" value="缩小" id="small" onclick="small()" />
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lieri111/archive/2010/05/13/5587079.aspx图片的放大缩小，可以自己来设置比例
1.按照建筑图先做好静态的房屋布局页面。然后对每个房间进行编号。
2.数据库存储房屋数据（编号，状态，房东等等信息）。
3.显示的时候先读库，根据条件查询出相应的房间数据，在通过模板赋值改变页面显示的房间状态（改变颜色,加载房屋信息等）第二个问题：
这个比较麻烦，类似于GIS的实现技术，对于相同的房间，需要预先制作好几种不同的视野比例布局，针对用户的缩放，可以分别显示到不同的视野。
热点你做过吗？我觉得可以用<map></map>替代滚轮的放大缩小。这样的话可以大大缩小打开一个页面的时间。以中国地图为例:
首页面显示的是全图，程序员按照省界做好各省份的热点坐标；当用户希望查看北京地图的时候，可以点击北京区域，这样就进入北京市地图全图页面。具体到你的需求：
【（一）200多个不规则房屋方格，我如何快速的在一个页面上显示出来。同时，他们的布局要按照建筑图摆放。】：
1、首先将200多套房屋的信息写到库里；
2、以建筑图为背景，将房屋信息从库里读出，摆放到相应的位置；
3、做各大单元的热点坐标；
4、点击热点后，进入小单元的页面展示
5、如果需要，将小单元再分单元....直至显示出细节
谢谢你的回答！正在尝试着用一个div来显示一个房屋，并在页面上绝对定位每一个div。同时这些div的坐标信息和长宽是存在库中的。
这样在生成的页面的时候非常方便，同时更新房屋的状态也很方便。同时房屋的扩展性也很好。
唯一的缺点就是在初期，统计每一个房屋的坐标有一点繁琐。不过可以找到一定规律用脚本来实现自动导入。关于放大和缩小的问题还是没有很好的解决方法。过我现在是采用定义一个单位长度来表示一个单位。在记录房屋方格大小和位置的时候都以这个常量为单位，到时候该表这个单位长度的大小来实现放大和缩小。只是不能支持滚轮，要点击按钮。期待更好的方法！