功能說明：
1.鼠標點擊房間內家具則視覺焦點移動到該家具。
2.鼠標點擊空白處則視覺移動相應距離。
3.鼠標滾輪控制縮放比例大小。
兼容IE 5 6 7 8 9 10 firefox chrome
（注明：效果參考過cloudgamer的文章3D ROOM：http://www.cnblogs.com/cloudgamer/archive/2010/09/20/Image3D.html，並以自己的思路實現。）
效果預覽：
由於頁面太大，就不直接在這里展示了給出下載地址：點擊下載
靜態效果圖：
實現原理：
如果把一個景象用矩形表示，那么視覺上由近到遠的景象就可以表示為多個原點相同，尺寸逐漸變小的矩形組，如下圖：
因此如果我們把處於相同視覺距離的一組物體繪制在同一個矩形區域內，最后把不同層級的矩形按其遠近對矩形內物體坐標進行對應的縮放，就可以實現不同物體遠近的視覺差。
代碼分析：
init: function(id, options) {//初始化
options = options || {};
this.container = $(id || 'container'); //容器
this.arr = []; //保存所有元素
this.centerX = this.container.clientWidth / 2; //原點坐標的left
this.centerY = this.container.clientHeight / 2; //原點坐標的top
this.maxScale = options.maxScale || 1.5; //最近圖像最大縮放比
this.minScale = options.minScale || 0.7; //最近圖像最小縮放比
this.selectedDuration = options.selectedDuration || 1000; //選中圖片時，視覺移向被選中圖片所需要的時間
this.moveDuration = options.moveDuration || 1000; //點擊視覺移動需要的時間
this.tweenType = options.tweenType || 'easeOut';
this.currentScale = 1; //最近圖像當前縮放比
containerPos = getContainerPos(this.container); //獲取容器位置
bindScrollHandler.call(this); //綁定鼠標滾動處理程序
bindClickHandler.call(this); //綁定鼠標移動處理程序
首先看需要初始化的參數：
container：一個容器作為房子，包含所有家具元素。
arr：保存所有家具元素的數組，為后續對所有家具元素的批處理操作作准備。
centerX，centerY：為了后續計算元素位置和縮放比的方便，我們把容器中點作為坐標原點，這兩個參數分別為原點的left和top值。
maxScale，minScale：我們需要鼠標滾輪的滾動來縮放元素大小（改變視覺距離大小），因此我們需要定下視覺上最近的圖像的最大和最小縮放比。
selectedDuration：當鼠標點擊一張圖片時，會把視覺聚焦到該圖片上，該參數為視覺聚焦到該圖片上所花的時間。
moveDuration：當鼠標點擊空白位置，視覺上也會進行一定的位移的移動，該參數為位移所經歷的時間。
tweenType：緩動的類型，上面提到過得聚焦和移動都是通過緩動方式進行，該參數為緩動類型名，默認支持linear，easeIn，easeOut三種緩動模式。
currentScale：視覺上最近的圖像當前的縮放比，一開始為1，經過鼠標滾輪縮放會發生變化，最小為minScale，最大為maxScale。
addTweenType: function(type, func) {//添加緩動方式
(typeof func == 'function' || typeof func == 'object') && (Tween[type] = func);
}
前面提到過可以為聚焦和移動選擇緩動類型，這里也提供接口添加緩動類型，可以自己創建緩動類型名，傳入function或object。
addElem: (function() {//為房子添加元素 參數：x坐標 y坐標 縮放比 圖片地址 元素id
var setImgHover = function(img) {//鼠標在元素上顯示白框
img.onmouseover = function(eve) {
eve = eve || window.event;
var target = eve.target || eve.srcElement;
target.style.border = '1px white solid';
}
}
var setImgOut = function(img) {//鼠標離開元素白框消失
img.onmouseout = function(eve) {
eve = eve || window.event;
var target = eve.target || eve.srcElement;
target.style.border = 'none';
}
}
return function(x, y, scale, src, id) {
var elem = new Image();
var arr = this.arr;
var container = this.container;
var self = this;
elem.onload = function() { //元素加載處理程序
container.appendChild(elem);
elem.id = id;
elem.style.position = 'absolute';
elem.style.zIndex = Math.floor(scale * 1000);
elem.initWidth = elem.clientWidth;
elem.initHeight = elem.clientHeight;
elem.initScale = scale;
elem.initX = x;
elem.initY = y;
updatePos.call(self, elem, x, y, scale); //更新元素位置
arr.push(elem);
bindHandlerForImage.call(self, elem);
setImgHover(elem);
setImgOut(elem);
}
elem.src = src;
}
})()
}
該方法用於為房子添加家具元素，注意傳入的x，y坐標只需要是正常情況下（非縮放后）家具相對於容器的坐標，按比例縮放的事交給程序去做而不需要自己計算。另外這里有兩個似有的方法：setImgHover和setImgOut，它們分別完成的小任務是為元素在鼠標移上去時添加白框，移出后白框消失的功能。接着就是生成元素，設置其初始x，y值，初始縮放比，之后調用updatePos根據x y設置元素的left，top實現在容器內的定位。
var updatePos = function(elem, x, y, scale) {//根據元素的x y坐標 更新元素位置，縮放比和大小
elem._x = x;
elem._y = y;
elem.scale = scale;
if (scale > 1.05) { //縮放比大於1.05則消失
elem.style.display = 'none';
}
else {
elem.style.display = 'block';
}
elem.style.left = this.centerX + scale * x + 'px';
elem.style.top = this.centerY - scale * y + 'px';
elem.style.width = elem.initWidth * scale + 'px';
elem.style.height = elem.initHeight * scale + 'px';
};
update的時候為元素設置_x,_y值，為元素當前的x y值，之后如果當前scale大於1.05，則隱藏圖片，否則會擋住后面縮放比較小的圖片。最后把x，y，scale映射到left，top，width，height。
var bindHandlerForImage = function(img) {//為圖片點擊綁定事件處理程序
var self = this;
img.onclick = function(eve) {
eve = eve || window.event;
var enhance; //是否放大（否則縮小）
var target = eve.target || eve.srcElement;
//如果該圖片的縮放比已經為1，或點擊的是容器，或timeId不為undefined（之前的選擇動畫還沒結束）則返回
if (target.initScale == 1 || target == self.container || typeof timeId != 'undefined') {
return;
}
removeClickHandler(); //選中圖片期間，取消鼠標移動處理程序
removeScrollHandler(); //選中圖片期間，取消鼠標滾動處理程序
var scaleMargin = 1 - target.scale; //所選中圖片的縮放比距離1的差距
var newX = target.initWidth / 2 * (-1); //被選中的圖片的新X坐標，處於容器正中央
var newY = target.initHeight / 2; //被選中的圖片的新Y坐標，處於容器正中央
var xMargin = newX - img._x; //到新位置X方向所要移動的位移
var yMargin = newY - img._y; //到新位置Y方向所要移動的位移
var arr = self.arr;
for (var i = 0; i < arr.length; i++) {//用現在的xy坐標和scale重新設置initX，initY和initScale
arr[i].initX = arr[i]._x;
arr[i].initY = arr[i]._y;
arr[i].initScale = arr[i].scale;
}
times = 0;
target.scale >= 1 ? enhance = false : enhance = true; //如果所選中scale大於1，則需要縮小，小於1，則要放大
timeId = window.setTimeout(function() {
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
if (typeof arr[i].startTime == 'undefined') {
ele.startTime = new Date().getTime();
}
setImgPositionInTween.call(self, ele, xMargin, yMargin, scaleMargin, target); //緩動方式改變元素位置
}
if ((enhance && target.scale >= 1) || (!enhance && target.scale < 1)) {
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
ele.startTime = undefined;
ele.initScale = ele.scale;
ele.initX = ele._x;
ele.initY = ele._y;
}
window.clearTimeout(timeId);
timeId = undefined;
bindClickHandler.call(self);
bindScrollHandler.call(self);
}
else {
window.setTimeout(arguments.callee, 20);
}
}, 20);
}
}
之后是為圖片綁定點擊選中的處理程序，如果該圖片的縮放比已經為1，或點擊的是容器，或timeId不為undefined（之前的選擇動畫還沒結束）則返回。之后是根據點擊圖片當前的縮放比，x，y的值計算圖片移動到正中央時需要的縮放比差值，x差值，y差值，之后傳入緩動函數使圖片以特定的緩動模式進行移動和縮放。緩動函數需要傳入的四個參數分別為：t（當前所用時間） b（其實距離） c（要走的總距離） d（經歷的總時間）。
var ScrollHandler = function(self) {
return function(eve) {//綁定鼠標滾動時處理程序，動態改變房子內所有元素縮放比
eve = eve || window.event;
var arr = self.arr;
if (navigator.userAgent.indexOf("Firefox") > 0) {
//如果已到達最大值，只能向負方向滾動縮小比例，如果已到最小值，則只能向正方向滾動擴大比例，如果處於中間值，則正負方向都可以滾動
if (hasToMax(self.currentScale, self.maxScale, self.minScale, eve.detail)) {
times += eve.detail / 3;
scrollable = true;
}
else {
scrollable = false;
}
}
else {
if (hasToMax(self.currentScale, self.maxScale, self.minScale, eve.wheelDelta)) {
times += eve.wheelDelta / 120;
scrollable = true;
}
else {
scrollable = false;
}
}
if (scrollable) {//如果可以滾動縮放
self.currentScale = 0;
for (var i = 0; i < arr.length; i++) {
var newScale = arr[i].initScale + times * 0.02; //更新縮放比scale
(newScale > self.currentScale) && (self.currentScale = newScale); //獲取最近圖像（最大圖像）當前縮放比
updatePos.call(self, arr[i], arr[i]._x, arr[i]._y, newScale);
}
}
eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
}
};
再看看鼠標滾動的處理程序，首先只有三種情況允許滾動：
1.縮放比到達最大值，鼠標滾動縮小。
2.縮放比到達最小值，鼠標滾動放大。
3.縮放比在中間值。
以上三種情況的判斷交給hasToMax方法。計算好縮放比后，再次調用updatePos調節元素位置和大小。另外需要禁止鼠標滾輪的默認行為，防止滾動鼠標是滾動條跟着滾動。
var clickHandler = function() {
var self = this;
return function(eve) {
removeClickHandler();
removeHandlerForAllImg(self.arr);
eve = eve || window.event;
var containerLeft = containerPos[0];
var containerTop = containerPos[1];
var pageX = eve.pageX || eve.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
var pageY = eve.pageY || eve.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
var marginX = (pageX - containerLeft - self.centerX) * (-1); //鼠標在容器的X坐標
var marginY = (pageY - containerTop - self.centerY); //鼠標在容器的Y坐標
var startTime = new Date().getTime();
changeInTween.call(self, startTime, marginX, marginY, self.moveDuration)();
}
}
最后看看點擊容器移動指定位移的處理程序：首先通過pageX或clientX+scrollLeft-clientTop（IE8以及以下版本）計算鼠標指針相對於容器的位置，然后根據點擊位置，計算出離原點的距離，並使所有元素位移相應長度。每次點擊更新startTime，duration則為用戶所設置。
var r=new room();
/* 草 */
r.addElem(350,-60,1,'grass.gif','grass1');
r.addElem(-600,-60,1,'grass.gif','grass2');
r.addElem(350,-60,0.7,'grass.gif','grass3');
r.addElem(-600,-60,0.7,'grass.gif','grass4');
/* 門 */
r.addElem(-225,200,0.65,'door.gif','door');
/* 燈 */
r.addElem(-400,600,0.63,'x-light.jpg','xlight');
r.addElem(-99,600,0.63,'light.gif','light');
/* 方桌 */
r.addElem(-480,-73,0.63,'table1.gif','table1');
/* 圓桌 */
r.addElem(600,0,0.6,'chair3.gif','chair2');
r.addElem(100,42,0.59,'chair1.gif','chair1');
r.addElem(180,-74,0.59,'table2.gif','table2');
r.addElem(360,24,0.57,'chair2.gif','chair2');
/* 鋼琴 */
r.addElem(-850,246,0.56,'piano.gif','piano');
/* 書桌 */
r.addElem(600,240,0.5,'booktable.gif','booktable');
/* 電視 */
r.addElem(-206,79,0.4,'tv.gif','tv');
最后是調用方法，傳入參數：x坐標 y坐標 縮放比 圖片地址 id。（注意該x y坐標是縮放前的坐標而不是縮放后的坐標，縮放后的坐標在程序內部根據scale值計算）。
所有源代碼：
View Code
<!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=gb2312" />
<title>無標題文檔</title>
<style>
body{text-align:center;}
#container{position:relative; background-color:black; width:1200px; height:600px; overflow:hidden; cursor:pointer; margin:0 auto;}
</style>
</head>
<body>
<div id="s"></div>
<div id="container">
</div>
</body>
<script>
var room = (function() {
var _room = function(id, options) {
this.init(id, options);
}
_room.prototype = (function() {
var containerPos; //容器位置
var times = 0; //縮放倍數
var scrollable = true; //是否可滾動縮放
var timeId2;
var Tween = { //緩動對象
linear: function(t, b, c, d) {
return c * t / d + b;
},
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
};
var $ = function(id) { return document.getElementById(id); }
var emptyFunction=function(){};
var getContainerPos = function(container) {//獲取容器位置
var left = 0;
var top = 0;
while (container.offsetParent) {
left += container.offsetLeft;
top += container.offsetTop;
container = container.offsetParent;
}
return [left, top];
}
var updatePos = function(elem, x, y, scale) {//根據元素的x y坐標 更新元素位置，縮放比和大小
elem._x = x;
elem._y = y;
elem.scale = scale;
if (scale > 1.05) { //縮放比大於1.05則消失
elem.style.display = 'none';
}
else {
elem.style.display = 'block';
}
elem.style.left = this.centerX + scale * x + 'px';
elem.style.top = this.centerY - scale * y + 'px';
elem.style.width = elem.initWidth * scale + 'px';
elem.style.height = elem.initHeight * scale + 'px';
};
var changeInTween = function(startTime, marginX, marginY, duration) {
var self = this;
var arr=self.arr;
window.clearTimeout(timeId2);
return function() {
var time = new Date().getTime() - startTime;
var distantX = Tween[self.tweenType](time, 0, marginX, duration);
var distantY = Tween[self.tweenType](time, 0, marginY, duration);
if (time <= duration) {
for (var i = 0; i < arr.length; i++) {
var img = arr[i];
updatePos.call(self, img, img.initX + distantX, img.initY + distantY, img.scale); //更新所有元素位置
}
timeId2 = window.setTimeout(arguments.callee, 50);
}
else {
for (var i = 0; i < arr.length; i++) {
var img = arr[i];
img.initX = img._x;
img.initY = img._y;
}
window.clearTimeout(timeId2);
bindClickHandler.call(self);
bindHandlerForAllImg.call(self);
}
}
}
var clickHandler = function() {
var self = this;
return function(eve) {
removeClickHandler();
removeHandlerForAllImg(self.arr);
eve = eve || window.event;
var containerLeft = containerPos[0];
var containerTop = containerPos[1];
var pageX = eve.pageX || eve.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
var pageY = eve.pageY || eve.clientY + document.documentElement.scrollTop - document.documentElement.clientTop;
var marginX = (pageX - containerLeft - self.centerX) * (-1); //鼠標在容器的X坐標
var marginY = (pageY - containerTop - self.centerY); //鼠標在容器的Y坐標
var startTime = new Date().getTime();
changeInTween.call(self, startTime, marginX, marginY, self.moveDuration)();
}
}
var bindClickHandler = function() {//綁定鼠標事件處理程序
$('container').onclick = clickHandler.call(this);
}
var removeClickHandler = function() {//刪除鼠標事件處理程序
$('container').onclick = emptyFunction;
}
//是否達到最大值
var hasToMax = function(currentScale, maxScale, minScale, detail) {
return (currentScale >= maxScale && detail < 0) || (currentScale <= minScale && detail > 0) || (currentScale > minScale && currentScale < maxScale)
}
var ScrollHandler = function(self) {
return function(eve) {//綁定鼠標滾動時處理程序，動態改變房子內所有元素縮放比
eve = eve || window.event;
var arr = self.arr;
if (navigator.userAgent.indexOf("Firefox") > 0) {
//如果已到達最大值，只能向負方向滾動縮小比例，如果已到最小值，則只能向正方向滾動擴大比例，如果處於中間值，則正負方向都可以滾動
if (hasToMax(self.currentScale, self.maxScale, self.minScale, eve.detail)) {
times += eve.detail / 3;
scrollable = true;
}
else {
scrollable = false;
}
}
else {
if (hasToMax(self.currentScale, self.maxScale, self.minScale, eve.wheelDelta)) {
times += eve.wheelDelta / 120;
scrollable = true;
}
else {
scrollable = false;
}
}
if (scrollable) {//如果可以滾動縮放
self.currentScale = 0;
for (var i = 0; i < arr.length; i++) {
var newScale = arr[i].initScale + times * 0.02; //更新縮放比scale
(newScale > self.currentScale) && (self.currentScale = newScale); //獲取最近圖像（最大圖像）當前縮放比
updatePos.call(self, arr[i], arr[i]._x, arr[i]._y, newScale);
}
}
eve.preventDefault ? eve.preventDefault() : eve.returnValue = false;
}
};
var bindScrollHandler = function() { //綁定鼠標滾動處理程序
if (navigator.userAgent.indexOf("Firefox") < 0) {
document.onmousewheel = ScrollHandler(this);
}
else {
document.addEventListener("DOMMouseScroll", ScrollHandler(this), false);
}
}
var removeScrollHandler = function() {//取消鼠標滾動處理程序
if (navigator.userAgent.indexOf("Firefox") < 0) {
document.onmousewheel = emptyFunction;
}
else {
document.removeEventListener("DOMMouseScroll", ScrollHandler, false);
}
}
var setImgPositionInTween = function(img, xMargin, yMargin, scaleMargin, target) {//以緩動方式改變元素位置
var startTime = img.startTime;
var duration = this.selectedDuration; //緩動總耗時
var tweenType = this.tweenType;
var time = new Date().getTime() - startTime; //緩動經過時間
var bX = img.initX;
var dX = xMargin;
var bY = img.initY;
var dY = yMargin;
var bScale = img.initScale;
var dScale = scaleMargin;
var newX = Tween[tweenType](time, bX, dX, duration);
var newY = Tween[tweenType](time, bY, dY, duration);
var newScale = Tween[tweenType](time, bScale, dScale, duration);
updatePos.call(this, img, newX, newY, newScale);
}
var bindHandlerForImage = function(img) {//為圖片點擊綁定事件處理程序
var self = this;
img.onclick = function(eve) {
eve = eve || window.event;
var enhance; //是否放大（否則縮小）
var target = eve.target || eve.srcElement;
//如果該圖片的縮放比已經為1，或點擊的是容器，或timeId不為undefined（之前的選擇動畫還沒結束）則返回
if (target.initScale == 1 || target == self.container || typeof timeId != 'undefined') {
return;
}
removeClickHandler(); //選中圖片期間，取消鼠標移動處理程序
removeScrollHandler(); //選中圖片期間，取消鼠標滾動處理程序
var scaleMargin = 1 - target.scale; //所選中圖片的縮放比距離1的差距
var newX = target.initWidth / 2 * (-1); //被選中的圖片的新X坐標，處於容器正中央
var newY = target.initHeight / 2; //被選中的圖片的新Y坐標，處於容器正中央
var xMargin = newX - img._x; //到新位置X方向所要移動的位移
var yMargin = newY - img._y; //到新位置Y方向所要移動的位移
var arr = self.arr;
for (var i = 0; i < arr.length; i++) {//用現在的xy坐標和scale重新設置initX，initY和initScale
arr[i].initX = arr[i]._x;
arr[i].initY = arr[i]._y;
arr[i].initScale = arr[i].scale;
}
times = 0;
target.scale >= 1 ? enhance = false : enhance = true; //如果所選中scale大於1，則需要縮小，小於1，則要放大
timeId = window.setTimeout(function() {
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
if (typeof arr[i].startTime == 'undefined') {
ele.startTime = new Date().getTime();
}
setImgPositionInTween.call(self, ele, xMargin, yMargin, scaleMargin, target); //緩動方式改變元素位置
}
if ((enhance && target.scale >= 1) || (!enhance && target.scale < 1)) {
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
ele.startTime = undefined;
ele.initScale = ele.scale;
ele.initX = ele._x;
ele.initY = ele._y;
}
window.clearTimeout(timeId);
timeId = undefined;
bindClickHandler.call(self);
bindScrollHandler.call(self);
}
else {
window.setTimeout(arguments.callee, 20);
}
}, 20);
}
}
var removeHandlerForAllImg=function(arr){//移除所有圖片選擇處理程序
for(var i=0;i<arr.length;i++){
arr[i].onclick=emptyFunction;
}
}
var bindHandlerForAllImg=function(){//綁定所有圖片選擇處理程序
for(var i=0;i<this.arr.length;i++){
bindHandlerForImage.call(this,this.arr[i]);
}
}
return {
init: function(id, options) {//初始化
options = options || {};
this.container = $(id || 'container'); //容器
this.arr = []; //保存所有元素
this.centerX = this.container.clientWidth / 2; //原點坐標的left
this.centerY = this.container.clientHeight / 2; //原點坐標的top
this.maxScale = options.maxScale || 1.5; //最近圖像最大縮放比
this.minScale = options.minScale || 0.7; //最近圖像最小縮放比
this.selectedDuration = options.selectedDuration || 1000; //選中圖片時，視覺移向被選中圖片所需要的時間
this.moveDuration = options.moveDuration || 1000; //點擊視覺移動需要的時間
this.tweenType = options.tweenType || 'easeOut';
this.currentScale = 1; //最近圖像當前縮放比
containerPos = getContainerPos(this.container); //獲取容器位置
bindScrollHandler.call(this); //綁定鼠標滾動處理程序
bindClickHandler.call(this); //綁定鼠標移動處理程序
},
addTweenType: function(type, func) {//添加緩動方式
(typeof func == 'function' || typeof func == 'object') && (Tween[type] = func);
},
addElem: (function() {//為房子添加元素 參數：x坐標 y坐標 縮放比 圖片地址 元素id
var setImgHover = function(img) {//鼠標在元素上顯示白框
img.onmouseover = function(eve) {
eve = eve || window.event;
var target = eve.target || eve.srcElement;
target.style.border = '1px white solid';
}
}
var setImgOut = function(img) {//鼠標離開元素白框消失
img.onmouseout = function(eve) {
eve = eve || window.event;
var target = eve.target || eve.srcElement;
target.style.border = 'none';
}
}
return function(x, y, scale, src, id) {
var elem = new Image();
var arr = this.arr;
var container = this.container;
var self = this;
elem.onload = function() { //元素加載處理程序
container.appendChild(elem);
elem.id = id;
elem.style.position = 'absolute';
elem.style.zIndex = Math.floor(scale * 1000);
elem.initWidth = elem.clientWidth;
elem.initHeight = elem.clientHeight;
elem.initScale = scale;
elem.initX = x;
elem.initY = y;
updatePos.call(self, elem, x, y, scale); //更新元素位置
arr.push(elem);
bindHandlerForImage.call(self, elem);
setImgHover(elem);
setImgOut(elem);
}
elem.src = src;
}
})()
}
})();
return _room;
})();
var r=new room();
/* 草 */
r.addElem(350,-60,1,'grass.gif','grass1');
r.addElem(-600,-60,1,'grass.gif','grass2');
r.addElem(350,-60,0.7,'grass.gif','grass3');
r.addElem(-600,-60,0.7,'grass.gif','grass4');
/* 門 */
r.addElem(-225,200,0.65,'door.gif','door');
/* 燈 */
r.addElem(-400,600,0.63,'x-light.jpg','xlight');
r.addElem(-99,600,0.63,'light.gif','light');
/* 方桌 */
r.addElem(-480,-73,0.63,'table1.gif','table1');
/* 圓桌 */
r.addElem(600,0,0.6,'chair3.gif','chair2');
r.addElem(100,42,0.59,'chair1.gif','chair1');
r.addElem(180,-74,0.59,'table2.gif','table2');
r.addElem(360,24,0.57,'chair2.gif','chair2');
/* 鋼琴 */
r.addElem(-850,246,0.56,'piano.gif','piano');
/* 書桌 */
r.addElem(600,240,0.5,'booktable.gif','booktable');
/* 電視 */
r.addElem(-206,79,0.4,'tv.gif','tv');
</script>
</html>
歡迎轉載，請標明出處：http://www.cnblogs.com/Cson/archive/2012/01/31/2333119.html