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

<strike id="ecws0"><input id="ecws0"></input></strike>

每日更新|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模塊層。

<strike id="o2ocg"><input id="o2ocg"></input></strike>