js右下角通知提示框的实现

最新推荐文章于 2020-02-26 14:13:10 发布

aoxiang94

最新推荐文章于 2020-02-26 14:13:10 发布

阅读量2k

点赞数 1

分类专栏： js 前台显示文章标签： jsp javascript

本文链接：https://blog.csdn.net/aoxiang94/article/details/50491328

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前台显示

5 篇文章 0 订阅

订阅专栏

1、需要在页面的body中加载弹出的方法：

<body onLoad="document.getElementById('tip').style.height='0px';start()">

2、需要把提示的div放到页面的底部

<div id="tip" style="text-align:12px;"><h1><a href="javascript:void(0)" οnclick="start()">×</a>最新通知</h1>
	<ul>
		<li> <img src="/images/fangkuai.png" /> 
		这里有一个通知<a href="#">查看</a>！</li>

<pre name="code" class="html"><span style="white-space:pre">		</span><li> <img src="${ctx}/images/fangkuai.png" /> 
		这里有一个通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">查看</a></span>！</li>

<span style="white-space:pre">		</span><li> <img src="${ctx}/images/fangkuai.png" /> 
		这里有一个通知<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#">查看</a></span>！</li>

</ul></div>

3、这里是js主要方法

<script type="text/javascript">
//通知提示信息
	var handle;
	function start(){
		var obj = document.getElementById("tip");
		if (parseInt(obj.style.height)==0){
			obj.style.display="block";
			handle = setInterval("changeH('up')",2);
		}else{
			handle = setInterval("changeH('down')",2) 
		} 
	}
	function changeH(str){
		var obj = document.getElementById("tip");
		if(str=="up"){
			if (parseInt(obj.style.height)>200){
				clearInterval(handle);
			}else{
				obj.style.height=(parseInt(obj.style.height)+8).toString()+"px";
			}
		}
		if(str=="down"){
			if (parseInt(obj.style.height)<8){
				clearInterval(handle);
				obj.style.display="none";
			}else{ 
				obj.style.height=(parseInt(obj.style.height)-8).toString()+"px"; 
			}
		}
	}
	function showwin(){
		document.getElementsByTagName("html")[0].style.overflow = "hidden";
		start();
		document.getElementById("shadow").style.display="block";
		document.getElementById("detail").style.display="block"; 
	}
	function recover(){
		document.getElementsByTagName("html")[0].style.overflow = "auto";
		document.getElementById("shadow").style.display="none";
		document.getElementById("detail").style.display="none";  
	}
</script>

4、这里是css样式

<style type="text/css">
#tip ul li{}
#tip {
	position:fixed;
	right:0px;
	bottom:0px;
	height:0px;
	width:300px;
	border:1px solid #8093ba;
	background-color:#ffffff;
	padding:1px;
	overflow:hidden;
	display:none;
	font-size:12px;
	z-index:10;
}
#tip h1 {
	font-size:14px;
	height:26px;
	line-height:26px;
	background-color:#0587DF;
	color:#fff;
	padding:0px 3px 0px 3px;
}

#tip p {padding-left:10px; color:#000000;}
#tip h1 a {float:right;text-decoration:none;color:#fff;}
</style>

5、这是通知的提示的小图标

aoxiang94

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js右下角通知提示框的实现

1、需要在页面的body中加载弹出的方法：2、需要把提示的div放到页面的底部×最新通知这里有一个通知查看！这里有一个通知查看！这里有一个通知查看！ 3、这里是js主要方法//通知提示信息 var handle; function start(){ var obj = document.getElementB
复制链接

扫一扫

专栏目录