Html阿尔法公司游戏攻略,index.html

#div1 {

width: 100px;

height: 100px;

background: red;

position: absolute;

left: 200px; top: 200px;

}

var oDiv = document.getElementById('div1');

oDiv.onmousedown = function(ev){

var disX = ev.clientX;

var disY = ev.clientY;

var iWidth = oDiv.offsetWidth;

var iHeight = oDiv.offsetHeight;

var iR = this.offsetLeft + iWidth - 5 < disX;

var iB = this.offsetTop + iHeight - 5 < disY;

var iL = disX - this.offsetLeft < 5;

var iT = disY - this.offsetTop < 5;

var offleft = oDiv.offsetLeft;

var offtop = oDiv.offsetTop

document.onmousemove = function(ev){

var w = ev.clientX - disX;

var h = ev.clientY - disY;

var lw = disX - ev.clientX;

var lh = disY - ev.clientY;

// console.log( w );

if( iR ){

oDiv.style.width = iWidth + w + 'px';

}

if( iB ){

oDiv.style.height = iHeight + h + 'px';

}

if (iL){

if(iWidth + lw >= 0){

oDiv.style.width = iWidth +lw + 'px';

oDiv.style.left = -lw + offleft + 'px';

}

}

if(iT){

if(iHeight + lh >= 0){

oDiv.style.height = iHeight + lh + 'px';

oDiv.style.top = -lh + offtop +'px';

}

}

};

document.onmouseup = function(){

document.onmousemove = null;

};

};

/*

练习：实现八方向都可以拖拽调整尺寸大小。

*/

一键复制

编辑

Web IDE

原始数据

按行查看

历史