利用js实现右下角悬浮提示框代码



28 109 37



特效描述:利用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

加群请备注:从官网了解到