`

js右下角弹出窗口,点击可关闭效果

 
阅读更多

<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;bottom:0px; 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 show_pop(){//显示窗口
document.getElementById("winpop").style.display="block";
timer=setInterval("changeH(4)",2);//调用changeH(4),每0.002秒向上移动一次
}
function hid_pop(){//隐藏窗口
timer=setInterval("changeH(-4)",2);//调用changeH(-4),每0.002秒向下移动一次
}
//www.jb51.net 脚本之家测试通过
function changeH(addH) {
var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height||MsgPop.currentStyle.height);//用 parseInt将对象的高度转化为数字,以方便下面比较（JS读<style>中的height要 用"currentStyle.height"）
if (popH<=100&&addH>0||popH>=4&&addH<0){//如果高度小于等于100(str>0)或高度大于等于4(str<0)
MsgPop.style.height=(popH+addH).toString()+"px";//高度增加或减少4个象素
}
else{//否则
clearInterval(timer);//取消调用,意思就是如果高度超过100象素了,就不再增长了，或高度等于0象素了，就不再减少了
MsgPop.style.display=addH>0?"block":"none"//向上移动时窗口显示,向下移动时窗口隐藏（因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉）
}
}
window.onload=function(){//加载
setTimeout("show_pop()",800);//0.8秒后调用show_pop()
}
</script>
<body>
<div id="silu">


<button onclick="show_pop()">测试按钮</button>
</div>
<div id="winpop">
<div class="title">您有新的消息<span class="close" onclick="hid_pop()">X</span></div>
<div class="con"><a href='#'>脚本之家</a></div>
</div>
</body>

分享到：
| 网页特效：随滚动条移动的DIV层
评论
发表评论

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

相关推荐

    Ajax右下角弹出窗口

    Ajax右下角弹出窗口是一种常见的用户交互设计，它利用Ajax技术实现在不刷新整个页面的情况下，于页面右下角动态展示信息或提示。这种设计不仅提升了用户体验，还能有效地传递实时数据，使得网页更具交互性和响应性。...

    页面右下角弹出窗口

    在"页面右下角弹出窗口"的实现中，主要涉及以下几个关键知识点： 1. **选择器与DOM操作**：jQuery提供了丰富的选择器来选取页面中的元素，如ID选择器(#id)，类选择器(.class)等。首先，我们需要一个隐藏的弹出窗口...

    WEB窗口右下角弹出窗口提示效果

    在网页设计中，"WEB窗口右下角弹出窗口提示效果"是一种常见的用户交互手段，用于向用户展示通知、消息或者重要信息。这种效果能够吸引用户的注意力，而不干扰他们当前的操作，因此在现代Web应用中非常流行。下面将...

    网页右下角弹出窗口（jquery）

    网页右下角弹出窗口是网页交互设计中常见的一种元素，通常用于显示通知、广告或者重要消息。在jQuery这个强大的JavaScript库的帮助下，实现这样的功能变得简单而高效。本篇文章将详细探讨如何使用jQuery来创建网页右...

    jquery插件（网页右下角弹出窗口）

    **jQuery 插件：网页右下角弹出窗口** 在网页设计中，有时我们需要实现一些交互功能，如向用户展示重要通知、提示信息或者广告，这时网页右下角弹出窗口的功能就显得尤为重要。jQuery 是一个广泛使用的JavaScript库...

    右下角弹出窗口实例代码

    在IT行业中，右下角弹出窗口是一种常见的用户体验设计元素，尤其在网页应用和广告展示中。这种设计能够吸引用户的注意力，同时不打断他们的主要浏览体验。本实例代码旨在实现一个兼容IE6+及Firefox浏览器的右下角滑...

    jquery 右下角弹出窗口 可以放大缩小 关闭的！

    在给定的标题“jquery 右下角弹出窗口 可以放大缩小 关闭的！”中，我们可以理解这是一个利用 jQuery 实现的功能模块，它位于网页的右下角，提供弹出窗口的通知功能，且窗口具有可放大、缩小和关闭的交互特性。这种...

    js 仿qq右下角弹出窗口

    标题 "js 仿qq右下角弹出窗口" 指的是使用JavaScript编程技术来创建一个功能，模拟QQ软件在用户界面右下角显示通知或消息提示的效果。这种设计常见于许多网页应用，用于提醒用户有新的信息、更新或者活动。下面我们...

    好用的jquery类似QQ页面右下角弹出窗口

    标题提到的“好用的jquery类似QQ页面右下角弹出窗口”是指利用jQuery实现的一种模仿QQ聊天窗口从页面右下角弹出的效果。这种效果在网页通知、消息提示等方面非常常见，能够吸引用户的注意力而不会过于打扰他们的浏览...

    BS 浏览器右下角弹出窗口

    标题中的“BS 浏览器右下角弹出窗口”指的是在基于浏览器（Browser）的系统中，特别是在Web开发中，实现的一种特定的用户界面效果。这种效果通常用于通知、提示或者显示一些临时性的信息，它会出现在浏览器窗口的右...

    网页右下角弹出提示框

    网页右下角弹出提示框是一种常见的用户交互设计，它能够有效地吸引用户的注意力，传递重要信息或引导用户进行特定操作。这种设计在许多网站和应用中都有应用，尤其是在电子商务、新闻资讯以及社交媒体平台中尤为常见...

    右下角弹出关闭变背投广告代码.rar

    在IT行业中，尤其是在网页开发和用户体验设计领域，"右下角弹出关闭变背投广告代码"是一个常见的技术实现，通常涉及到JavaScript（JS）编程、前端交互设计以及用户体验优化。这个压缩包文件可能包含了实现这一功能的...

    一个类似QQ的用JavaScript实现的在网页右下角弹出窗口源码例子

    2. **用JavaScript在网页右下角弹出窗口.htm**： 这个例子展示了如何利用JavaScript将一个窗口定位到网页的右下角。主要知识点包括： - CSS布局：理解页面坐标系统，使用绝对定位（position: absolute）将元素放置...

    模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式

    "模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式"是一个专注于实现这一功能的资源，它提供了多种实现此类通知的技术手段。下面将详细阐述这四种不同的实现方式以及它们在实际应用中的价值。 首先，右下角...

    右下角弹出的小窗口js代码

    在网页设计中，右下角弹出的小窗口通常被称为通知框、消息提示框或气泡提示，它们用于向用户展示重要信息或者提醒。这些小窗口的实现主要依赖于JavaScript（JS）语言，一种广泛应用于客户端网页开发的脚本语言。在...

    百度新浪右下角的弹出窗口

    标题中的“百度新浪右下角的弹出窗口”指的是在浏览百度或新浪网站时，有时会在屏幕右下角出现的一种特定类型的用户界面元素。这种弹出窗口通常用于展示广告、通知或者引导用户到其他相关页面。它是一种网页交互设计...

    javascript右下角弹出层

    javascript 右下角弹出层,右下角探出广告窗口的javascript代码

    jQury右下角弹出广告窗口

    在网页开发中，有时我们需要实现一些用户交互效果，比如在页面右下角弹出广告窗口。本篇文章将深入探讨如何使用jQuery实现这一功能。 首先，确保在您的项目中已经引入了jQuery库。可以通过CDN链接或本地文件来引入...

    js右下角弹框

    在网页设计中，右下角弹出窗口是一种常见的交互方式，用于展示通知、广告或重要提示等信息。这种弹窗不仅能够吸引用户的注意力，还能够提升用户体验。通过使用JavaScript，开发者可以轻松地实现自定义的弹出效果。 ...

    jQuery网页右下角弹出视频

    总结起来，"jQuery网页右下角弹出视频"涉及的知识点包括：jQuery的选择器和API使用、DOM操作、事件处理、CSS定位、动画效果、以及ASP.NET的文件处理。通过这些技术的结合，我们可以创建出一个用户友好且吸引人的网页...

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