设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网络编程 › js右下角弹出窗口,点击可关闭效果

发新帖

楼主: ttx9n

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

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2008-9-5 17:08:45 | 显示全部楼层 |阅读模式

广告中经常用到的效果，大家可以测试下

<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秒向下移动一次 
} 
https://www.jb51.net/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>

<button onclick="show_pop()">测试按钮</button> 
 
 
    您有新的消息X 
<a href='https://www.jb51.net/www.jb51.net'>脚本之家</a> 
 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

右下角, 弹出窗口, 关闭

相关帖子

回复

使用道具举报

1 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 25537

发消息

发表于 2022-8-17 23:14:34 | 显示全部楼层

。。。。。。。。。。。。。。。

回复支持反对

使用道具举报

0 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 24231

发消息

发表于 2022-12-31 13:48:00 | 显示全部楼层

快更新啊，我擦

回复支持反对

使用道具举报

0 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 25208

发消息

发表于 2023-1-18 19:16:10 | 显示全部楼层

撒旦撒旦撒擦擦擦擦

回复支持反对

使用道具举报

9 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 25953

发消息

发表于 2023-2-7 07:53:28 | 显示全部楼层

呵呵呵呵呵呵

回复支持反对

使用道具举报

0 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 25208

发消息

发表于 2023-8-24 19:34:11 | 显示全部楼层

谢谢楼主分享

回复支持反对

使用道具举报

0 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 25089

发消息

发表于 2024-3-2 05:21:27 | 显示全部楼层

还可以不错

回复支持反对

使用道具举报

11 主题	1万回帖	1万积分

Rank: 8 Rank: 8

积分: 13170

发消息

发表于 2024-4-26 01:34:45 | 显示全部楼层

呵呵呵呵呵呵呵a

回复支持反对

使用道具举报

0 主题	1万回帖	1万积分

Rank: 8 Rank: 8

积分: 19953

发消息

发表于 2024-6-18 20:45:42 | 显示全部楼层

撒房产税陈飞飞

回复支持反对

使用道具举报

0 主题	2万回帖	2万积分

Rank: 8 Rank: 8

积分: 20979

发消息

发表于 2024-7-29 07:40:59 | 显示全部楼层

额风风风微风微风违法

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-12 04:12 , Processed in 0.103422 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表