首先非常感谢网友涛涛的无私分享，此作品是一款他今天刚写的原创js实现鼠标绘制层拖拽功能，暂时只实现了鼠标绘制图层功能，拖拽功能还没加上，是他在蓝色理想看见有这样一个特效,没有用jquery来写的，是利用js面向对象简单模仿实现的，此作品主要是提供给网友们学习用。。。
代码如下：
function dragDrwa(){this.init.apply(this,arguments)}
dragDrwa.prototype={
init:function(){
window.zIndex=0;
this._down();
},
_down:function(){
var _self=this;
document.onmousedown=function(e){
var evt=window.event || e
,iScrollTop=document.documentElement.scrollTop || document.body.scrollTop
,iScrollLeft=document.documentElement.iScrollLeft || document.body.scrollLeft
,startX=evt.clientX+iScrollLeft,startY=evt.clientY+iScrollTop
,oDiv=document.createElement('div');
oDiv.className='div';
oDiv.style.left=startX+iScrollLeft+'px';
oDiv.style.top=startY+iScrollTop+'px';
oDiv.style.zIndex=window.zIndex++;
document.body.appendChild(oDiv);
document.onmousemove=function(e){
var evt=window.event || e,endX=startX-evt.clientX-iScrollLeft,endY=startY-evt.clientY-iScrollTop;
oDiv.style.width=Math.abs(endX)+'px';
oDiv.style.height=Math.abs(endY)+'px';
oDiv.style.left=endX< 0 ? startX : (evt.clientX+iScrollLeft)+'px';
oDiv.style.top=endY< 0 ? startY+'px' : (evt.clientY+iScrollTop)+'px';
return false;
}
document.onmouseup=function(){
var ofianlDiv=document.createElement('div');
ofianlDiv.style.left=oDiv.style.left;
ofianlDiv.style.top=oDiv.style.top;
ofianlDiv.style.width=oDiv.style.width;
ofianlDiv.style.height=oDiv.style.height;
ofianlDiv.className='ok';
document.body.removeChild(oDiv);
document.body.appendChild(ofianlDiv);
document.onmousemove=document.onmouseup=null;
_self.releaseCapture && _self.releaseCapture();
}
this.setCapture && this.setCapture();
return false;
}
}
}
var t=new dragDrwa();
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友涛涛 绘制图形 层特效 拖拽