javascript实现的右下角弹窗的方法

 　　javascript实现的右下角弹窗的方法

      本文实例讲述了javascript实现的右下角弹窗的方法。分享给大家供大家参考。具体如下：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!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">
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");
var popH=parseInt(MsgPop.style.height);
if (popH==0){
MsgPop.style.display="block";
show=setInterval("changeH('up')",2);
}
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";
}
}
}
window.onload=function(){
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);
}
</script>
</head>
<body>
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
内容展示内容展示内容展示内容展示内容展示
<hr>
<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>
<div>http://www.jb51.net/</div>
</body>
</html>

　　希望本文所述对大家的javascript程序设计有所帮助。

时间： 2024-08-02 17:02:27

javascript实现的右下角弹窗的方法的相关文章

javascript实现的右下角弹窗实例_javascript技巧

本文实例讲述了javascript实现的右下角弹窗的方法.分享给大家供大家参考.具体如下: <!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"> &

js实现仿MSN带关闭功能的右下角弹窗代码_javascript技巧

本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码.分享给大家供大家参考.具体如下: 这是一款非常精致漂亮的仿MSN右下角弹出窗口,带关闭功能,直接复制代码就管用.演示要用到几个小图片,运行的时候点击右键保存一下,这里提供一种思路,并不完全局限于此种方法,熟能生巧. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-msn-close-able-adv-codes/ 具体代码如下: <HTML> <HEAD> &l

Win7如何屏蔽网页右下角弹窗广告？

  不管是工作还是日常使用电脑,我们经常会遇到电脑右下角不断的弹窗提醒.在Win7电脑上打开浏览器浏览网页的时候,网页右下角总会弹出一些烦人的广告,挡住了网页内容从而影响我们正常浏览.那要如何关闭这些烦人的广告呢?现在小编就和大家介绍一下Win7屏蔽网页右下角弹窗广告的方法. 具体方法如下: 一.浏览器屏蔽广告: 1.打开浏览器,进入浏览器设置窗口,选择工具---Internet选项. 2.进入Internet选项 窗口之后,选择"安全窗口",并点击"自定义级别".

电脑右下角弹窗广告怎么办?

  有时候我们会发现在电脑启动进入桌面之后,就会在桌面右下角弹出一个窗口小广告,这让人感觉很不舒服.通常导致弹窗广告出现的原因大都是因为安装了恶意软件所致,那么电脑右下角弹窗广告怎么办?怎么关闭?我给大家介绍一种简单方法,一键解决此问题,大家跟我一步步操作就行了. 右下角弹窗广告 1.首先,打开360安全卫士首页,在右下方找到"人工服务"图标,鼠标左键单击打开人工服务. 2.然后,在上方查找方案的搜索框中输入"右下角弹窗广告",搜索问题的解决方案. 3.打开搜索结果

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)_javascript技巧

一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { aler

JavaScript实现滚动栏效果的方法

  JavaScript实现滚动栏效果的方法         这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

注意JavaScript中RegExp对象的test方法

javascript|对象 javascript 中的 RegExp 对象用于正则表达式相关的操作,这个对象提供了一个方法 test 来判定某个字符串是否满足某个 pattern. 返回值是 true/false.今天我碰到了一个问题: <script type="text/javascript"><!--var re = /^\d+(?:\.\d)?$/ig;    alert(re.test('112.3'));alert(re.test('33'));//--&

javascript面向对象编程之三 function是方法(函数)

在进行编程时,必免不了要碰到复杂的功能.初学者最怕复杂的功能,因为不能够很好的进行功能边界划分,只能一大串if.循环加case堆叠在一起,结果出来的程序自己看着晕,别人看着更晕.好程序不是写给computer的,而是写给human的.遇到复杂功能,应该想着把它简化.组件化,把小功能封装成小组件,小功能块可以任意的组合得到千变万化的复杂功能.function就可以帮助我们把功能进行封装.那什么是封装呢.要我说,只要把具体实现给打包,对外提供调用接口那就是封装,方法也好.类也好就做了这些事. jav

JavaScript获得url查询参数的方法

  本文实例讲述了JavaScript获得url查询参数的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = v