& lt！DOCTYPE？html & gt
& lthtml & gt
& lthead & gt
& ltmeta？charset="UTF-8 " >
& ltstyle & gt
*?{
邊距:？0;
填充:？0
}
。盒子？{
位置:？絕對；
top:？100 px；
左:？100 px；
}
/*四邊*/
。盒子？。t，
。盒子？。b，
。盒子？。我，
。盒子？。r？{
位置:？絕對；
z指數:？1;
背景:# 666；
}
。盒子？。我，
。盒子？。r？{
寬度:？10px；
身高:？100%;
光標:？調整列的大小；
}
。盒子？。t，
。盒子？。b？{
寬度:？100%;
身高:？10px；
光標:？行調整大小；
}
。盒子？。t？{
top:？0;
}
。盒子？。b？{
底部:？0;
}
。盒子？。l？{
左:？0;
}
。盒子？。r？{
對不對:？0;
}
/*四個角*/
。盒子？。tl，
。盒子？。bl，
。盒子？。br，
。盒子？。tr？{
寬度:？20px
身高:？20px
位置:？絕對；
背景:？# CCC
z指數:？2;
光標:？nwse-調整大小
}
。盒子？。tl，
。盒子？。bl？{
左:？-5px；
}
。盒子？。tr，
。盒子？。br？{
對不對:？-5px；
}
。盒子？。br，
。盒子？。bl？{
底部:？-5px；
}
。盒子？。tl，
。盒子？。tr？{
top:？-5px；
}
。盒子？。tr，
。盒子？。bl？{
光標:？nesw-resize；
}
/*圖片*/
img？{
寬度:？100%;
身高:？100%;
}
& lt/style & gt；
& lt腳本& gt
window.onload？=?功能？()?{
var？奧迪夫？=?document . getelementsbytagname(' div ')[0]；
oDiv.style.width？=?500 px’；
var？阿斯潘？=?odiv . getelementsbytagname(' span ')；
為了什麽？(var？我？=?0;？我？& lt？aSpan.length？i++)？{
drag fn(aSpan[I])；
}
功能？dragFn(obj)？{
obj.onmousedown？=?功能？(ev)？{
var？oEv？=?ev？||?事件；
var？oldWidth？=?oDiv.offsetWidth
var？oldHeight？=?oDiv.offsetHeight
var？oldX？=?oEv.clientX
var？oldY？=?oEv.clientY
var？oldLeft？=?oDiv.offsetLeft
var？oldTop？=?oDiv.offsetTop
document.onmousemove？=?功能？(ev)？{
var？oEv？=?ev？||?事件；
如果？(obj.className？==?TL’)？{
oDiv.style.width？=?oldWidth？-?(oEv.clientX？-?oldX)？+?px’；
odiv . style . height = old height-(oev . clienty-oldY)+' px '；
oDiv.style.left？=?oldLeft？+?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.top？=?oldTop？+?(oEv.clientY？-?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?bl’)？{
oDiv.style.width？=?oldWidth？-?(oEv.clientX？-?oldX)？+?px’；
odiv . style . height = old height+(oev . clienty-oldY)+' px '；
oDiv.style.left？=?oldLeft？+?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.bottom？=?oldTop？+?(oEv.clientY？+?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?tr’)？{
oDiv.style.width？=?oldWidth？+?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.height？=?oldHeight？-?(oEv.clientY？-?oldY)+' px '；
oDiv.style .對吧？=?oldLeft？-?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.top？=?oldTop？+?(oEv.clientY？-?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?br’)？{
oDiv.style.width？=?oldWidth？+?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.height？=?oldHeight？+?(oEv.clientY？-?oldY)+' px '；
oDiv.style .對吧？=?oldLeft？-?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.bottom？=?oldTop？+?(oEv.clientY？+?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?t’)？{
odiv . style . height = old height-(oev . clienty-oldY)+' px '；
oDiv.style.top？=?oldTop？+?(oEv.clientY？-?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?b’)？{
oDiv.style.height？=?oldHeight？+?(oEv.clientY？-?oldY)+' px '；
oDiv.style.bottom？=?oldTop？-?(oEv.clientY？+?oldY)？+?px’；
}
不然呢？如果？(obj.className？==?l’)？{
oDiv.style.height？=?oldHeight？+?px’；
oDiv.style.width？=?oldWidth？-?(oEv.clientX？-?oldX)？+?px’；
oDiv.style.left？=?oldLeft？+?(oEv.clientX？-?oldX)？+?px’；
}
不然呢？如果？(obj.className？==?r’)？{
oDiv.style.height？=?oldHeight？+?px’；
oDiv.style.width？=?oldWidth？+?(oEv.clientX？-?oldX)？+?px’；
oDiv.style .對吧？=?oldLeft？-?(oEv.clientX？-?oldX)？+?px’；
}
};
document.onmouseup？=?功能？()?{
document.onmousemove？=?null
};
回歸？假的；
};
}
};
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class="box " >
& lt跨度？class="r " >& lt/span>。
& lt跨度？class="l " >& lt/span>。
& lt跨度？class="t " >& lt/span>。
& lt跨度？class="b " >& lt/span>。
& lt跨度？class="br " >& lt/span>。
& lt跨度？class="bl " >& lt/span>。
& lt跨度？class="tr " >& lt/span>。
& lt跨度？class="tl " >& lt/span>。
& ltimg？src = "/70 cfsjip 0 qiz 8 tyhnq/img/iknow/730-350-0 . jpg " & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；