天天看點

js浮動廣告框(可根據螢幕大小自動調整位置)

js浮動廣告框(可根據螢幕大小自動調整位置)

左下角

右下角

<!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=GBK" /> 

</head> 

<body> 

<style type="text/css">  

#rbbox{ 

    border:1px solid #f00; 

    width:180px; 

    height:0px; 

    margin:0px; 

    padding:0px; 

    overflow:hidden; 

    position:absolute; 

    left:0; 

    bottom:0; 

.vipall{ 

    border:0px solid #00f; 

    background:url(images/booking.jpg) no-repeat; 

    height:150px; 

    position:relative; 

.vipclose{ 

    border:0px solid #f00; 

    font-size:12px; 

.vipclose a{ 

    text-decoration:none; 

    color:#444; 

.vipclose a:hover{ 

</style>  

<div id="rbbox"> 

    <div class="vipclose"><a href="#" onclick="closeBox()">關閉</a></div> 

    <a href="http://www.test.com/booking/" style="cursor:pointer"><div class="vipall"></div></a> 

</div> 

<script language="javascript" type="text/javascript">  

window.onload=function(){showBox();setTimeout("closeBox()",300000)}  

function showBox(o){  

if (o==undefined) o=document.getElementById("rbbox");  

oo.style.height=o.clientHeight+2+"px";  

if (o.clientHeight<180) setTimeout(function(){showBox(o)},5);  

}  

function closeBox(){document.getElementById("rbbox").style.display="none";}  

</script>  

</body> 

</html> 

      本文轉自許琴 51CTO部落格,原文連結:http://blog.51cto.com/xuqin/928665,如需轉載請自行聯系原作者

繼續閱讀