js实现右下角消息提示功能
来源:互联网 发布:linux 看一个目录大小 编辑:程序博客网 时间:2024/05/16 07:11
首先添加样式
#winpop {
width: 200px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid #666;
margin: 0;
padding: 1px;
overflow: hidden;
display: block;
}
#winpop .title {
width: 100%;
height: 22px;
line-height: 20px;
background: #FFCC00;
font-weight: bold;
text-align: center;
font-size: 12px;
}
#winpop .con {
width: 100%;
height: 90px;
line-height: 80px;
font-weight: bold;
font-size: 12px;
color: #FF0000;
text-decoration: underline;
text-align: center
}
#silu {
font-size: 12px;
color: #666;
position: absolute;
right: 0;
text-align: right;
text-decoration: underline;
line-height: 22px;
}
.close {
position: absolute;
right: 4px;
top: -1px;
color: #FFF;
cursor: pointer
}
页面上添加div
<div id="winpop" style="display: none">
<div class="title">
您有新的短消息!
<span class="close"
onclick="javascript:document.getElementById('winpop').style.display='none'">X</span>
</div>
<div id="tipmsg" class="con">
</div>
</div>
添加js方法
function tips_pop(){
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
if (popH==0){
MsgPop.style.display="block";//显示隐藏的窗口
show=setInterval("changeH('up')",2);
setTimeout("tips_pop()",3000);
}
else {
hide=setInterval("changeH('down')",2);
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){
if (popH<=100){
MsgPop.style.height=(popH+4).toString()+"px";
}
else{
clearInterval(show);
}
}
if(str=="down"){
if (popH>=4){
MsgPop.style.height=(popH-4).toString()+"px";
}
else{
clearInterval(hide);
MsgPop.style.display="none"; //隐藏DIV
}
}
}
需要时调用tips_pop()方法 右下角就会弹出窗体
- js实现右下角消息提示功能
- js实现右下角提示框
- javascript实现屏幕右下角消息提示框
- js消息提示功能
- js右下角通知提示框的实现
- 屏幕右下角消息提示
- 基于jQuery实现的右下角消息提示框MsgBox
- Qt 实现桌面右下角消息弹窗提示
- Web Notification简单实现桌面消息通知(右下角提示)
- 实现浏览器-右下角-小广告功能(您有新的消息)
- Extjs 轻松实现窗口右下角短消息提示功能
- Extjs 轻松实现窗口右下角短消息提示功能
- 实现右下角提示框
- js右下角定时通知提示框的实现
- JS右下角消息框代码
- winforms实现类似QQ消息框一样的右下角消息提示窗口
- WinForm:实现类似QQ消息框一样的右下角消息提示窗口
- winforms实现类似QQ消息框一样的右下角消息提示窗口
- PHP生成中文拼音
- 五种开源协议的比较(BSD,Apache,GPL,LGPL,MIT)
- 关于OSGI的概念
- jquery和json使用代码
- 查询避免Unknown column ‘xxx’ in ‘where clause’
- js实现右下角消息提示功能
- 反省一下
- C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)
- 无题
- 学习BMC Remedy笔记1
- OSSIM相关PDF
- C&GCC&GDB使用详解与举例
- 用VPN联网玩游戏(在内外与外网玩局域网游戏)
- 10年后