<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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>无标题文档</title>
<style type="text/css">
* {margin:0px;padding:0px;}
html,body { height:100%;}
body { font-size:14px; line-height:24px;}
#tip {
position: absolute;
right: 0px;
bottom: 0px;
height: 0px;
width: 180px;
border: 1px solid #CCCCCC;
background-color: #eeeeee;
padding: 1px;
overflow:hidden;
display:none;
font-size:12px;
z-index:10;
}
#tip p { padding:6px;}
#tip h1,#detail h1 {
font-size:14px;
height:25px;
line-height:25px;
background-color:#0066CC;
color:#FFFFFF;
padding:0px 3px 0px 3px;
filter: Alpha(Opacity=100);
}
#tip h1 a,#detail h1 a {
float:right;
text-decoration:none;
color:#FFFFFF;
}
#shadow {
position:absolute;
width:100%;
height:100%;
background-color:#000000;
z-index:11;
filter: Alpha(Opacity=70);
display:none;
overflow:hidden;
}
#detail {
width:500px;
height:200px;
border:3px double #ccc;
background-color:#FFFFFF;
position:absolute;
z-index:30;
display:none;
left:30%;
top:30%
}
</style>
<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>
</head>
<body onload="document.getElementById('tip').style.height='0px'">
<div id="shadow"> </div>
<div id="detail">
</div>
<div id="tip"><h1><a href="javascript:void(0)" onclick="start()">×</a>您有新消息</h1><p><a href="javascript:void(0)" onclick="showwin()">点击这里查看详细</a></p></div>
</body>
</html>
<script language="JavaScript">
window.attachEvent("onload", myTimer); //绑定到onload事件
function myTimer() {
start();
window.setTimeout("myTimer()",6000);//设置循环时间
}
</script>
分享到：
相关推荐
javascript实现的网页右下角淡入淡出的消息提示框特效
【JS右下角悬浮提示框】是一种常见的网页交互设计元素，它主要利用JavaScript语言来实现。这个特效使得网站能够在右下角位置展示一种可以自由控制（最大化、最小化和关闭）的信息提示或广告内容，提高了用户体验和...
总的来说，"jQuery右下角弹出提示框代码.zip"是一个实用的资源，它展示了如何利用jQuery和CSS实现一个动态、可定制的提示信息系统。对于开发者来说，这个代码不仅可以直接应用于项目，还可以作为学习自定义提示框...
"JS右下角弹出浮动提示框特效.zip" 提供了一种实用的方法，能够帮助开发者在页面上实现这种功能。这个特效代码利用了JavaScript（JS）的动态特性，结合jQuery库，以及CSS样式来创建一个位于屏幕右下角的浮动提示框。...
在这个"JS实现右下角弹窗消息通知提示框插件特效源码.zip"压缩包中，包含了一个用JavaScript编写的插件，该插件实现了在网页右下角动态弹出消息通知的功能，为用户提供了一种即时信息提示的视觉效果。这种功能在许多...
在本项目"jQuery网页右下角弹出视频"中，我们探讨的是如何利用jQuery实现在用户浏览网页时，在屏幕右下角优雅地弹出视频播放功能。这种设计可以用于吸引用户的注意力，比如显示重要的通知、教程或者广告。 首先，...
【标签】"JS特效-其它代码"表明这个压缩包除了包含实现消息通知的JavaScript代码外，可能还有其他与JavaScript特效相关的代码。这些特效可能是用来增强网页的视觉表现，提高用户交互体验的各种功能，比如动画、过渡...
"原生js右下角浮动层效果"是一个利用纯JavaScript实现的功能，它允许在网页的右下角创建一个可最大化和最小化的浮动层，这种效果常见于通知提示、设置面板或者广告窗口等场景。 首先，让我们了解一下JavaScript的...
"jQuery仿QQ右下角抖动效果"就是一个这样的例子，它通过JavaScript库jQuery实现了类似QQ聊天窗口右下角提示框的抖动动画，以吸引用户注意力并提供信息提示。 jQuery是一个轻量级、高性能的JavaScript库，它简化了...
总的来说，"jQuery版简单易用的可拖动右下角浮动窗口特效"是一个实用的网页开发工具，它通过简单的代码实现了用户友好的交互功能。无论是用于在线客服系统还是其他类型的浮动提示，都能提升网站的专业性和用户满意度...
在IT行业中，尤其是在网页开发领域，"右下角提示消息广告代码"是一种常见的技术实践，主要用于实现用户交互体验中的通知、广告展示或者消息提示。这种技术通常涉及到JavaScript（JS）编程语言，结合CSS样式和HTML...
这个“原生js div网页右下角浮动提示层可缩小和关闭浮动提示层”的项目，显然旨在解决这一问题。以下是关于这个主题的详细知识点： 1. **原生JavaScript**：原生JavaScript指的是不依赖任何库或框架，如jQuery或Vue...
在这个“可关闭的jQuery右下角浮动提示框窗口代码.zip”压缩包中，包含了一套实现可关闭的jQuery浮动提示框的解决方案。这个功能常用于网站上的通知、消息提示或者广告展示，可以吸引用户注意力而又不妨碍主要页面...
【jQuery仿Discuz右下角悬浮层提示】是一款利用JavaScript库jQuery实现的网页动态效果，其设计灵感来源于知名的论坛系统Discuz。这个效果主要用于在页面的右下角展示信息提示，如通知、消息或者广告等，它会在用户...
在网页设计中，动态效果和用户体验的提升是至关重要的，其中JS右下角弹出浮动提示框特效就是一种常见的交互设计手法。这种特效利用了JavaScript（JS）和CSS3的强大功能，为用户提供了一种新颖、直观的信息提示方式，...
本项目“jQuery可拖动右下角浮动窗口特效”就是基于jQuery实现的一种用户界面交互功能，旨在提供一个可自由移动且能自适应浏览器窗口大小的浮动窗口。这种效果常见于弹出提示框、广告浮窗或设置面板，能够提升用户的...
标题 "js 仿qq右下角弹出窗口" 指的是使用JavaScript编程技术来创建一个功能，模拟QQ软件在用户界面右下角显示通知或消息提示的效果。这种设计常见于许多网页应用，用于提醒用户有新的信息、更新或者活动。下面我们...
这个特效模拟了QQ或MSN的消息提示框，当有新消息时，一个提示框会从页面的右下角弹出。实现这个功能的关键是使用JavaScript来监听事件，并动态创建DOM元素以展示消息。同时，还需要考虑动画效果，如渐显渐隐、滑入...