JS模仿MSN右下角彈出提示框代碼

2019-11-21 00:14:23

字體：大中小

來源：轉載

供稿：網友

<!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>aa</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; } </style> <script type="text/javascript"> window.onload=function() { var divTip = document.createElement("div"); divTip.id="tip"; divTip.innerHTML="<h1><a href='javascript:void(0)' onclick='start()'>×</a>asdf</h1><p><a href='javascript:void(0)' onclick='showwin()'>asdf</a></p>"; divTip.style.height='0px'; divTip.style.bottom='0px'; divTip.style.position='fixed'; document.body.appendChild(divTip); } var handle; function start(count) { var obj = document.getElementById("tip"); if (parseInt(obj.style.height)==0) { obj.style.display="block"; handle = setInterval("changeH('up')",20); }else { handle = setInterval("changeH('down')",20) } } function changeH(str) { var obj=document.all?document.all["tip"] : document.getElementById("tip"); if(str=="up") { if (parseInt(obj.style.height)>100) 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(); window.open("http://tools.VeVB.COm"); } </script> </head> <body> <a href="javascript:void(0)" onclick="start()">click</a> </body> </html>

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

上一篇：前端開發的開始---基于面向對象的Ajax類

下一篇：基于jquery的仿百度的鼠標移入圖片抖動效果