原生js div网页右下角浮动提示层可缩小和关闭浮动提示层



150 596 199



特效描述:右下角浮动提示层 缩小浮动提示层 关闭浮动提示层,

代码结构

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=utf-8" />
<title>jQuery右下角悬浮提示框</title>
</head>
<body style="height:2000px;">
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.PcPoPmarket{z-index:1000;position:fixed;right:0px;bottom:0px;width:350px;height:238px;overflow:hidden;background:url(bg_open.png) no-repeat;}
*html .PcPoPmarket{position:absolute;}
.popTop{position:relative;height:30px;overflow:hidden;}
.popTop h2{color:#ff0000;font-size:14px;float:left;padding:8px 0 0 10px;line-height:20px;}
.popBtn{width:18px;height:18px;overflow:hidden;cursor:pointer;float:right;margin-left:1px;margin-top:9px;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}
.poplist{padding:10px;}
.poplist li{font-size:14px;height:28px;line-height:28px;}
</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';	
}
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';
}
function closeDiv(innerCall){
    if(document.getElementById('PcPoPmarket')==null)return;
	document.getElementById('PcPoPmarket').style.display = 'none';
}
</script>
<div id="PcPoPmarket" class="PcPoPmarket">
	<div id="popTop" class="popTop">
		<h2>右下角弹窗</h2>
		<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>
	<div class="poplist">
		<ul>
			<li><a href="#">新闻列表</a></li>
		</ul>
	</div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片广告 文字提示框 对联广告 提示框/弹出层 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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