利用js實現右下角懸浮提示框代碼



32 124 42



特效描述:利用js實現 右下角 懸浮提示框,利用js實現右下角懸浮提示框代碼

代碼結構

1. HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body style="height:2000px;">
<style>
.popBtn{width:18px; height:18px; cursor:pointer; float:right; margin-left:1px; margin-top:12px; display:inline; background:url(buttons.png) no-repeat;}
.popClose{margin-right:10px; width:15px; background-position:-39px 0}
.popClose:hover{background-position:-39px -20px}
.popShow{background-position:0px 0}
.popShow:hover{background-position:0px -20px}
.popHide{background-position:-19px 0}
.popHide:hover{background-position:-19px -20px}
</style>
<script type="text/javascript">
function showDiv(innerCall){
    if(document.getElementById('PcPoPmarket')==null)return;
		document.getElementById('PcPoPmarket').style.width = 350+'px';
		document.getElementById('PcPoPmarket').style.height = 238+'px';
		document.getElementById('showvod').style.display = 'none';
		document.getElementById('hidevod').style.display = 'block';	
		var lmt = document.getElementById('popFrame').contentWindow.document.getElementById('lmt');
		if(lmt!=null){
			lmt.style.backgroundImage = 'url(bg_open.png)';
		}
}
function hideDiv(innerCall){
    if(document.getElementById('PcPoPmarket')==null)return;
	document.getElementById('PcPoPmarket').style.width = 226 + 'px';
	document.getElementById('PcPoPmarket').style.height = 37 + 'px';
	document.getElementById('hidevod').style.display = 'none';
	document.getElementById('showvod').style.display = 'block';
	var lmt = document.getElementById('popFrame').contentWindow.document.getElementById('lmt');
	if(lmt!=null){
		lmt.style.backgroundImage = 'url(bg_min.png)';
	}
}
function closeDiv(innerCall){
    if(document.getElementById('PcPoPmarket')==null)return;
	document.getElementById('PcPoPmarket').style.display = 'none';
}
</script>
<span id="tmpAreaLmtDiv">
<div style="z-index: 1000; right: 0px; bottom: 0px; overflow-x: hidden; overflow-y: hidden; position: fixed; width: 350px; height: 238px; " id="PcPoPmarket">
<div id="popTop" style="z-index:1000; POSITION: absolute; right:0; height:30px; overflow:hidden;">
<span class="popBtn popClose" onclick="closeDiv()"></span>
<span class="popBtn popShow" onclick="showDiv()" id="showvod" style="display: none; "></span>
<span class="popBtn popHide" onclick="hideDiv()" id="hidevod" style="display: block; ">
</span></div>
<iframe id="popFrame" scrolling="no" frameborder="0" width="350" allowtransparency="true" height="238" src="poppage.html" target="_blank">-</iframe>
</div></span>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 浮動提示框 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片廣告 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子