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

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

关闭顶部展开顶部

展开边栏关闭边栏

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

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

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

查看演示效果

特效Tag：圆角拖动层添加

缂佸洦鈪礑edeCMS鐟欏棝顣堕弫娆戔柤娑旀壆鈹栭梻锟� 缁夌喐婀囬崝鈥虫珤闁缍夌涵鏇氱鞍閼辨棑绱� 閺冪姴鍜栫粩娆撴毐瀹搞儱鍙�,閻ф儳瀹抽弶鍐櫢娑撯偓闁款喖鍙忛弻锟�!

纯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模块层。

閺€鎯版&閸掑棔闊�

QQ缁屾椽妫�閺傜増姘顔煎触閼垫崘顔嗗顔煎触娴滆桨姹夌純锟�瀵偓韫囧啰缍�閻ф儳瀹抽幖婊嗘婢跺秴鍩楃純鎴濇絻閺囨潙顦�...