每日更新|TOP排行榜|Tag标签|充值

无忧首页网页模板程序模板建站教程视频教程网页特效图标素材字体下载站长工具站长问答

网页特效代码模板无忧>网页特效>层和布局特效代码>

收藏分享查看评论层和布局

纯CSS实现圆角、可拖动的一个DIV模块层_层和布局特效

查看演示效果

特效Tag：圆角拖动层添加

纯CSS实现圆角、可拖动的一个DIV模块层

<style>
body{
	margin:0px;
	padding:0px;
	font-size:14px;
}
#t	{
	position:absolute;
	float:left;
	left:0px;
	top:0px;
}
#a	{
	float:left;
}
.al	{
	opacity: 0.80;
	filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);
}
.al2{
	opacity: 0.00;
	filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);
}
U {
	DISPLAY: block;
	OVERFLOW: hidden;
	HEIGHT: 1px
}
U.f1 {
	background-color:#5cc;
	BACKGROUND: #5cc;
	MARGIN: 0px 3px
}
U.f2 {
	background-color:#5cc;
	BORDER-RIGHT: #5cc 2px solid;
	MARGIN: 0px 1px;
	BORDER-LEFT: #5cc 2px solid
}
U.f3 {
	background-color:#5cc;
	BORDER-RIGHT: #5cc 1px solid;
	MARGIN: 0px 1px;
	BORDER-LEFT: #5cc 1px solid
}
.d_top{
	clear:both;
	overflow:hidden;
	background-color:#5cc;
	height:29px;
	vertical-align:bottom;
}
.d_top a{
	float:right;
	margin-top:5px;
	margin-right:13px;
	padding-top:3px;
	width:18px;
	color:red;
	background-color:#789;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
}
.d_top span{
	float:left;
	font-size:13px;
	margin-left:15px;
	margin-top:8px;
	
}
.d_body {
	BORDER-RIGHT: #5cc 3px solid;
	BORDER-LEFT: #5cc 3px solid;
	padding:10px;
	height:200px;
	background-color:#fff;
}
.d_foot{
	clear:both;
	overflow:hidden;
	background-color:#5cc;
	height:2px;
}
</style>
<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	function show(id){
		var t = $(id);
		t.style.width=document.body.clientWidth;
		t.style.height=document.body.clientHeight;
		window.onresize=function(){
			t.style.width=document.body.clientWidth;
			t.style.height=document.body.clientHeight;
		}
		$(id).style.display="";
	}
	function cl(id){
		$(id).style.display="none";
	}
	
//-------------------------------------------------------------------------------
function moveEvent(e,id){
	var isIE = (document.all)?true:false;
	//navigator.userAgent.toLowerCase().indexOf("msie") != -1;
	//var event=window.event||event;
	drag = true;
	xx=isIE?event.x:e.pageX;
	yy=isIE?event.y:e.pageY;
	L = document.getElementById(id).offsetLeft;
	T = document.getElementById(id).offsetTop;
	document.onmousemove = function(e) {
		if (drag) {
			x=isIE?event.x:e.pageX;		if(x<0)x=0;
			y=isIE?event.y:e.pageY;		if(y<0)y=0;
			document.getElementById(id).style.left = L-xx+x;
			document.getElementById(id).style.top  = T-yy+y;
		}
	}
	document.onmouseup=function(){
		drag = false;
	}
}
window.onscroll=function(){
	$("back_div").style.width=document.body.scrollWidth;
	$("back_div").style.height=document.body.scrollHeight;
}
</script>
<body>
	<div id="a" style="position:absolute; left:300px; top:200px;">
		<a href="javascript:" onClick="show('t')">点这里哦！</a>	</div>
	
	<div id="t" style="display:none;">
		<div style="width:100%;height:100%; z-index:-1; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div">
		<iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>
		</div>
		<DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div">
			<iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>
			<U class="f1"></U><U class="f2"></U><U class="f3"></U>
			<div class="d_top" onMouseDown="moveEvent(event,'t_div')">
				<span>欢迎来到模板无忧</span>
				<a href="javascript:" onClick="cl('t')">×</a>
			</div>
			<DIV class="d_body" >模板无忧（mb5u.com）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。
			</DIV>
			<div class="d_foot"></div>
			<U class="f3"></U><U class="f2"></U><U class="f1"></U>
		</DIV>
	</div>
</body>

所属频道：层和布局特效/更新时间：2012-10-30

[收藏][报错][返回列表]

相关层和布局特效：

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

相关链接：
复制本页链接| 搜索纯CSS实现圆角、可拖动的一个DIV模块层
特效说明：
层和布局模板-纯CSS实现圆角、可拖动的一个DIV模块层。