js实现鼠标绘制层拖拽特效

首先非常感谢网友涛涛的无私分享，此作品是一款他今天刚写的原创js实现鼠标绘制层拖拽功能，暂时只实现了鼠标绘制图层功能，拖拽功能还没加上，是他在蓝色理想看见有这样一个特效,没有用jquery来写的，是利用js面向对象简单模仿实现的，此作品主要是提供给网友们学习用。。。

代码如下：

01	function dragDrwa(){this.init.apply(this,arguments)}

02	dragDrwa.prototype={

03	init:function(){

04	window.zIndex=0;

05	this._down();

06

},

07	_down:function(){

08	var _self=this;

09	document.onmousedown=function(e){

10	var evt=window.event || e

11	,iScrollTop=document.documentElement.scrollTop || document.body.scrollTop

12	,iScrollLeft=document.documentElement.iScrollLeft || document.body.scrollLeft

13	,startX=evt.clientX+iScrollLeft,startY=evt.clientY+iScrollTop

14	,oDiv=document.createElement('div');

15

16	oDiv.className='div';

17	oDiv.style.left=startX+iScrollLeft+'px';

18	oDiv.style.top=startY+iScrollTop+'px';

19	oDiv.style.zIndex=window.zIndex++;

20	document.body.appendChild(oDiv);

21	document.onmousemove=function(e){

22	var evt=window.event || e,endX=startX-evt.clientX-iScrollLeft,endY=startY-evt.clientY-iScrollTop;

23	oDiv.style.width=Math.abs(endX)+'px';

24	oDiv.style.height=Math.abs(endY)+'px';

25	oDiv.style.left=endX< 0 ? startX : (evt.clientX+iScrollLeft)+'px';

26	oDiv.style.top=endY< 0 ? startY+'px' : (evt.clientY+iScrollTop)+'px';

27	return false;

28

}

29	document.onmouseup=function(){

30	var ofianlDiv=document.createElement('div');

31	ofianlDiv.style.left=oDiv.style.left;

32	ofianlDiv.style.top=oDiv.style.top;

33	ofianlDiv.style.width=oDiv.style.width;

34	ofianlDiv.style.height=oDiv.style.height;

35	ofianlDiv.className='ok';

36	document.body.removeChild(oDiv);

37	document.body.appendChild(ofianlDiv);

38	document.onmousemove=document.onmouseup=null;

39	_self.releaseCapture && _self.releaseCapture();

40

}

41

42	this.setCapture && this.setCapture();

43	return false;

44

}

45

}

46

}

47	var t=new dragDrwa();

效果如下：

我爱学习网（www.5axxw.com），IT资讯、学院、资源下载一站式中文门户网站