`
joerong666
  • 浏览: 411118 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

页面右下角弹出提示信息,类QQ右下角新闻［转］

QQJavaScriptHTMLXHTMLCSS
阅读更多

<!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>页面右下角弹出提示信息,类QQ右下角新闻－－Inghot</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;}
#tip h1 a,#detail h1 a {float:right;text-decoration:none;color:#FFFFFF;}
#shadow {position:absolute;width:100%;height:100%;background:#CCCCCC;-moz-opacity:0.5;filter:Alpha(Opacity=50);opacity: 0.8;z-index:11;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"><h1><a href="javascript:void(0)" onclick="recover()">×</a>系统提示</h1>哈哈哈哈你～～～</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>

<p><a href="javascript:void(0)" onclick="start()">点击这里测试</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

分享到：
| 超酷js提示框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C# winform 右下角弹出消息框

    C# WinForm 消息提示功能，类似QQ的消息提醒样式，可定时关闭，消息框弹出从下往上，关闭从上往下，有动画效果。当用户鼠标停放在提示框上时，自动关闭功能停止 ，当移走鼠标时，重新开始自动关闭功能 。有C#源码；...

    jQuery 仿QQ右下角弹出消息提示.rar

    上传各种收集最新的jquery犀利效果。希望大家能够用得上。

    jQuery 仿QQ右下角弹出消息提示

    jQuery 仿QQ右下角弹出消息提示，很不错的，有多种弹出方式，Codefans.net截图如上，这只是其中一种的截图，它可以允许你自定义弹出窗口的标题、自定义窗口内容、设定动画弹出方式、设定自动关闭时间等，而且设计也...

    编写在右下角弹出的信息提示功能

    1.当用户在线，有新消息时，在右下角会弹出一个提示小窗口 ：象QQ那样 2.当用户不在线，登陆后（有新消息） ，同上弹出提示窗口

    vc模仿qq广播提示信息在屏幕的有下角弹出

    广播提示信息，该窗口能自动上升，下降，最后自动消失，点击框内文本如果是网站文本，就会打开网络。

    JQuery右下角提示弹出框示例

    里面包含了一个 index.html、jquery.messager.js、jquery-1.2.6.pack.js，打开index.html文件后有右下角提示信息。类似QQ会时不时的在右下角提示一些新闻资讯的。

    类似QQ弹出消息（源码）

    从其它地方收集的，类似于QQ右下角的弹出消息，能实现消息的自动隐藏，弹出消息的标题和内容都能点击，还有关闭按钮，功能比较强大。

    类似qq左下角的信息提示

    在遨游的左下角弹出窗口，遨游最小化后，弹出窗口还是显示在右下角，就是让弹出窗口不依赖页面显示

    VB滑出右下角系统信息【带网络】

    摘要:VB源码,系统相关,右下角,弹出窗口　VB显示右下角滑出窗口， 本程序代码内已进行相关标识，以便学者学习。 　本程序利用了窗口设置位置的方法,制作模拟QQ消息的提示 　一般用作软件升级提示、网站公布提示等等...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    各参数意义：c:页面中间,l:页面左侧,t:页面顶部,r:页面右侧,b:页面顶部,lt:左上角,rt:右上角,lb:左下角,rb:右下角 winAlpha：弹出窗体拖动时的透明度，默认为0.8 //以下三个参数主要用于win方法（当然你也可以...

    MSN QQ提示窗口

    制作+MSN、QQ+的消息提示窗口+-+源代码 右下角提示信息，弹出框

    DWR 实现QQ消息提示

    使用DWR 反向推进技术，实现从服务器端向客服端发送信息，减轻服务器的压力，不必要再使用定时查询数据库获取信息了，并有类似QQ的消息提示框（右下角的消息框）

    《程序天下：JavaScript实例自学手册》光盘源码

    15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...

    程序天下:JavaScript实例自学手册

    15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第...

    百度知道商城商品库存监测工具

    当指定的某种商品符合“兑换”条件时，右下角图标会变为红色，并弹出气球提示，双击红色图标即可激活窗体查看，窗体中用绿色底色标注的商品即为可“兑换”商品，并可通过双击相应行打开商品页面进行“抢购”。...

    游戏画面就弹出内存不能为read修复工具

    要终止程序，请单击“确定”的信息框，单击“确定”后，又出现“发生内部错误，您正在使用的其中一个窗口即将关闭”的信息框，关闭该提示信息后，IE浏览器也被关闭。解决方法： 1、 开始-运行窗口，输入“regsvr32 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡...

    Axure扩展程序20190703.zip

    4、上传成功后在弹出的弹窗中点击详细信息，在打开的页面中往下拉确认【允许访问文件网址】选项已经开启。 恭喜你到这步你就完成了所有安装扩展程序的操作。安装完成后最好打开html网页试一下是否能打开。 注：这个...

    高仿QQ2014，MDI，主题换肤

    14.加入（弹出承载控件：SkinDropDown） 使用方法： SkinDropDown _SkinDropDown = new SkinDropDown(控件：Control); _SkinDropDown.Show(new Point(0, 22)); 15.添加SystemInformationHelper静态类，获得操作系统...

    重要日期提醒节日记事本农历日期提醒

    你可以根据修要进行相关操作，当新增日期信息时一定要注意日期信息的时间格式要按照xxxx/xx/xx xx:xx:xx 填写，否则会提示错误，肯定不会添加成功的，F和刷新设置按钮都提供重新刷新样式的功能，右下角的图片双击...

Magicbox
Global site tag (gtag.js) - Google Analytics