<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>右下角的弹窗,sky整理收集</title>
</head>
<style type="text/css">
body { background:#333333;}
#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}
#winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center}
#silu { font-size:13px; color:#999999; position:absolute; right:0; text-align:right; text-decoration:underline; line-height:22px;}
.close { position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer}
</style>
<script type="text/javascript">
function tips_pop(){
var MsgPop=document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象
var popH=parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较
if (popH==0){ //如果窗口的高度是0
MsgPop.style.display="block";//那么将隐藏的窗口显示出来
show=setInterval("changeH('up')",2);//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次
}
else { //否则
hide=setInterval("changeH('down')",2);//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次
}
}
function changeH(str) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){ //如果这个参数是UP
if (popH<=100){ //如果转化为数值的高度小于等于100
MsgPop.style.height=(popH+4).toString()+"px";//高度增加4个象素
}
else{
clearInterval(show);//否则就取消这个函数调用,意思就是如果高度超过100象度了,就不再增长了
}
}
if(str=="down"){
if (popH>=4){ //如果这个参数是down
MsgPop.style.height=(popH-4).toString()+"px";//那么窗口的高度减少4个象素
}
else{ //否则
clearInterval(hide); //否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了
MsgPop.style.display="none"; //因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉
}
}
}
window.onload=function(){ //加载
document.getElementById('winpop').style.height='0px';//我不知道为什么要初始化这个高度,CSS里不是已经初始化了吗,知道的告诉我一下
setTimeout("tips_pop()",800); //3秒后调用tips_pop()这个函数
}
</script>
<body>
<div id="silu">
<button onclick="tips_pop()">测试按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的消息<span class="close" onclick="tips_pop()">X</span></div>
<div class="con">未读信息(1)</div>
</div>
</body>
</html>
分享到：
相关推荐
在本项目"jQuery网页右下角弹出视频"中，我们探讨的是如何利用jQuery实现在用户浏览网页时，在屏幕右下角优雅地弹出视频播放功能。这种设计可以用于吸引用户的注意力，比如显示重要的通知、教程或者广告。 首先，...
标题 "js 仿qq右下角弹出窗口" 指的是使用JavaScript编程技术来创建一个功能，模拟QQ软件在用户界面右下角显示通知或消息提示的效果。这种设计常见于许多网页应用，用于提醒用户有新的信息、更新或者活动。下面我们...
在这个"jQuery实现网页右下角弹出窗口特效.zip"压缩包中，包含了一些关键文件，用于创建一个在网页右下角弹出的窗口效果。下面将详细解释这些知识点。 1. **jQuery库**：jQuery库的核心功能是通过简洁的API来处理...
这个压缩包文件可能包含了实现这一功能的具体源代码，用于创建一个在页面右下角弹出并可关闭的背投式广告效果。 首先，我们来理解一下“弹窗漂浮”这个标签。在网页设计中，"弹窗"通常指的是那些在用户浏览页面时...
"jquery简单右下角弹出窗"是一个利用jQuery实现的常见用户交互功能，用于在页面的右下角显示提示信息或通知。这种效果通常用于向用户展示重要的消息、广告或者引导用户进行某些操作。 首先，我们来理解jQuery库的...
在网页设计中，右下角弹出窗口效果是一种常见的交互设计元素，用于吸引用户的注意力或者显示广告、通知等信息。这段代码实现的就是这样一个功能，它会在网页加载完成后从右下角弹出一个小窗口，通常用于展示广告内容...
本教程将深入探讨如何使用jQuery实现一个右下角自动弹窗提示的功能，这个功能常见于许多网站，用于通知用户更新、提醒或者提供交互信息。 首先，要实现这个功能，我们需要确保网页中已经引入了jQuery库。这通常通过...
在互联网页面设计中，一种常见的吸引用户注意力的广告形式是右下角弹出的标签式图片广告。这种广告设计能够巧妙地与用户交互，既不干扰主要内容的浏览，又能有效地传达广告信息。本文将深入探讨这种"右下角弹出支持...
在本案例中，我们探讨的是如何将`ZK`框架与`jQuery`库结合，来创建一个右下角动态特效提示窗口。这个功能通常用于显示通知、消息或者帮助信息，提升用户体验。 首先，`ZK`是一个基于Java的组件模型，它提供了丰富的...
【标题】"新浪博客页面右下角小跳窗效果.rar" 涉及的是一个网页交互功能，通常这种效果是通过JavaScript（JS）实现的一种窗口弹出或提示效果。在网页设计中，这样的小跳窗常用于显示消息通知、广告或者用户互动元素...
为了实现广告从右下角弹出的效果，我们可以使用`position: fixed;`让广告相对于浏览器窗口定位，`bottom`和`right`属性决定其初始位置，然后通过CSS动画改变这些值以模拟弹出效果。同时，`transition`属性可以添加...
标题中的"js+css3全屏折角导航菜单和右下角悬浮分享按钮特效.zip"指的是一款结合JavaScript（JS）和CSS3技术实现的网页交互效果，包括一个全屏的折角导航菜单和页面右下角的悬浮分享按钮。这种特效能够提升网站的...
这个功能通常用于增强...通过这个项目，开发者可以学习如何使用jQuery创建交互式弹出窗口，理解如何结合HTML、CSS和JavaScript实现复杂的效果，以及如何处理用户的交互事件。这对于提升前端开发技能是非常有价值的。
【jQuery右下角悬浮客服代码】是一个用于网页中的交互式设计元素，它通常出现在页面的右下角，为用户提供即时的在线客服支持。这个代码基于jQuery库，一个广泛使用的JavaScript库，提供了丰富的DOM操作、事件处理和...
在线客服的Tab标签通常会作为页面的一个固定元素，位于浏览器窗口的右下角，以便用户在任何时候都能轻松找到并发起聊天。HTML代码会包含一个触发客服对话框显示或隐藏的按钮元素，可能使用`<div>`或者`<a>`标签，并...
2. 右下角自动弹出的广告层实现：在页面的右下角显示一个弹出层是一种常见的页面元素展示方式，常用于展示广告、通知或者其他提示信息。该弹出层是通过HTML、CSS和jQuery结合使用来实现的。HTML定义了页面结构，CSS...
这种设计通常出现在网页的右下角，当用户点击浮动图标时，会弹出一个反馈表单，允许用户即时提交他们的意见或问题。这种功能在现代网站和应用中非常常见，因为它为用户提供了一种不离开当前页面就能提供反馈的方式，...
这个功能通常出现在网站的右下角，以一个可点击的图标或按钮形式存在，当用户点击后，会弹出一个聊天窗口，允许他们与客服人员进行交流。下面将详细解释实现这一功能所涉及的主要知识点。 1. **jQuery库**：jQuery...
- **弹出框（Modal）**: 弹出框是在网页主内容之上显示的一个浮动窗口，通常用于获取用户注意力或进行交互。 - **jQuery**: jQuery是一个轻量级的JavaScript库，简化了DOM操作、事件处理和动画效果。 2. **jQuery...
在"js仿win10桌面弹出窗口提示特效代码"中，开发者利用JavaScript来模仿Windows 10操作系统中的通知系统，创建了一个在页面右下角弹出的浮动窗口提示效果。这个功能在现代网页应用中非常常见，用于向用户传达关键...