有关div页面拖动、缩放、关闭、遮罩效果代码

277 阅读 0 评论 183 点赞

我是靠谱客的博主勤劳西装，这篇文章主要介绍有关div页面拖动、缩放、关闭、遮罩效果代码，现在分享给大家，希望可以做个参考。

<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> 
<title>UntitledDocument</title> 
<style><!-- 
#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ 
position:absolute; 
background:#00F; 
width:3px; 
height:3px; 
z-index:6; 
font-size:0; 
}

#rLeftDown,#rRightUp{cursor:ne-resize;} 
#rRightDown,#rLeftUp{cursor:nw-resize;} 
#rRight,#rLeft{cursor:e-resize;} 
#rUp,#rDown{cursor:n-resize;}

#rLeftDown{left:-4px;bottom:-4px;} 
#rRightUp{right:-4px;top:-4px;} 
#rRightDown{right:-4px;bottom:-4px;background-color:#00F;} 
#rLeftUp{left:-4px;top:-4px;} 
#rRight{right:-4px;top:50%;margin-top:-4px;} 
#rLeft{left:-4px;top:50%;margin-top:-4px;} 
#rUp{top:-4px;left:50%;margin-left:-4px;} 
#rDown{bottom:-4px;left:50%;margin-left:-4px;} 
--></style><style bogus="1">#rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ 
position:absolute; 
background:#00F; 
width:3px; 
height:3px; 
z-index:6; 
font-size:0; 
}

#rLeftDown,#rRightUp{cursor:ne-resize;} 
#rRightDown,#rLeftUp{cursor:nw-resize;} 
#rRight,#rLeft{cursor:e-resize;} 
#rUp,#rDown{cursor:n-resize;}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]