<html>
<head><title>右下角彈出層(可最小化)兼容IE火狐 - LIEHUO.NET</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body{text-align:center;}
#main{border:red 1px solid;width:1000px;height:1600px;margin:0 auto;}
#main #Layer3{width:400px;height:150px;border:green 1px solid;text-align:left;position:absolute;visibility:hidden;}
#main #Layer3 #open{float:left;text-align:center;width:360px}
#main #Layer3 #close{float:right;}
// -->
</style>
</head>
<body ><div id="main">
<div id="Layer3"><div id="open" onmouseover="openbox();"> <a href="http://www.liehuo.net/" _fcksavedurl="http://www.liehuo.net/" onclick="openbox()">點擊訪問烈火網(LIEHUO.NET)</a> </div>
<div id="close"><a href="#" _fcksavedurl="#" onclick="closebox()" >關閉</a><script type="text/javascript">
<!--
var Layer3=document.getElementById("Layer3")
var main=document.getElementById("main")
/*Layer3層開始設爲隱藏，不然開始的時候會不出現在底部，這裏通過跟js代碼同步條鎮，使scroll層開始就出現在左底*/
Layer3.style.visibility="visible"
function runright()
{
/*這裏-4主要是爲了顯示的比較好,因爲我設置了邊框*/
Layer3.style.top=document.body.scrollTop+document.body.clientHeight-Layer3.clientHeight-4+"px"
Layer3.style.rigth=document.body.scrollLeft+document.body.clientWidth-Layer3.clientWidth-4+"px"
/*隔一段時間執行這個函數*/
setTimeout("runright()",30)
}
/*關閉:設置高度一直減*/
function closebox()
{
Layer3.style.height=scroll.offsetHeight-4+"px"
//if (Layer3.offsetHeight>20)
// {
// setTimeout("closebox()",5)
// }
// else
// {
Layer3.style.visibility="hidden"
// }
}
function openbox()
{
if (Layer3.offsetHeight<148)
{
Layer3.style.visibility="visible"
Layer3.style.height=Layer3.offsetHeight+2+"px"
setTimeout("openbox()",5)
}
}
//www.liehuo.net
runright();
// -->
</script>
</div>
</div>
</div>
</body>
</html>
文章源自：烈火網，原文：http://www.liehuo.net/a/200909/148716.html
右下角彈出層
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,