js右下角悬浮提示框特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js右下角悬浮提示框特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>jQuery右下角悬浮提示框</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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)