日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

模板無(wú)憂

每日更新|TOP排行榜|Tag標(biāo)簽|充值

無(wú)憂首頁(yè) 網(wǎng)頁(yè)模板程序模板建站教程視頻教程網(wǎng)頁(yè)特效圖標(biāo)素材字體下載站長(zhǎng)工具站長(zhǎng)問(wèn)答

網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>層和布局特效代碼>

收藏分享查看評(píng)論層和布局

純CSS實(shí)現(xiàn)圓角、可拖動(dòng)的一個(gè)DIV模塊層_層和布局特效

查看演示效果

特效Tag：圓角拖動(dòng)層添加

純CSS實(shí)現(xiàn)圓角、可拖動(dòng)的一個(gè)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')">點(diǎn)這里哦！</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>歡迎來(lái)到模板無(wú)憂</span>
				<a href="javascript:" onClick="cl('t')">×</a>
			</div>
			<DIV class="d_body" >模板無(wú)憂（mb5u.com）提供各類網(wǎng)頁(yè)模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。
			</DIV>
			<div class="d_foot"></div>
			<U class="f3"></U><U class="f2"></U><U class="f1"></U>
		</DIV>
	</div>
</body>

所屬頻道：層和布局特效/更新時(shí)間：2012-10-30

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索純CSS實(shí)現(xiàn)圓角、可拖動(dòng)的一個(gè)DIV模塊層
特效說(shuō)明：
層和布局模板-純CSS實(shí)現(xiàn)圓角、可拖動(dòng)的一個(gè)DIV模塊層。