JavaScript浮動廣告窗口實例

jopen 9年前發布 | 3K 次閱讀 JavaScript

浮動廣告窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮動廣告窗口</title>
<style type="text/css">



#mydiv{
    width:100px;
    height:100px;
    background:#f00;
}
#content{
    text-align:center;
}
#adv{
    position:absolute;
    top:80px;
    left:60px;
}
#close{
    position:absolute;
    top:80px;
    left:164px;
}



</style>
<script type="text/javascript">
        var advObj;
        var advTop;
        var advLeft;
        var closeObj;
        var closeTop;
        var closeLeft;



    //獲取廣告的初始位置
    function place(){
        advObj=$("adv");
        closeObj=$("close");
        if(advObj.currentStyle){
            advTop=advObj.currentStyle.top;
            advLeft=advObj.currentStyle.left;
            closeTop=closeObj.currentStyle.top;
            closeLeft=closeObj.currentStyle.left;               
        }else{
            advTop=parseInt(document.defaultView.getComputedStyle(advObj,null).top);
            advLeft=parseInt(document.defaultView.getComputedStyle(advObj,null).left);
            closeTop=parseInt(document.defaultView.getComputedStyle(closeObj,null).top);
            closeLeft=parseInt(document.defaultView.getComputedStyle(closeObj,null).left);              
        }
    }


window.onload=function(){
    //var width=$("mydiv").style.width;

        //獲取使用內嵌樣式修飾的屬性



/          if($("mydiv").currentStyle){//判斷客戶端使得的瀏覽器
                var width=$("mydiv").currentStyle.width;
            }else{
                var width=document.defaultView.getComputedStyle($("mydiv"),null).width; //第二個參數表示偽元素，一般都設置為Null
            }
            alert(width);/
            place();
            $("close").onclick=function(){
                $("close").style.display="none";
                $("adv").style.display="none";
            };



    };
    function scroll(){
        advObj.style.top=parseInt(advTop)+parseInt(document.documentElement.scrollTop)+"px";
        advObj.style.left=parseInt(advLeft)+parseInt(document.documentElement.scrollLeft)+"px";
        closeObj.style.top=parseInt(closeTop)+parseInt(document.documentElement.scrollTop)+"px";
        closeObj.style.left=parseInt(closeLeft)+parseInt(document.documentElement.scrollLeft)+"px";
    }       

    window.onscroll=function(){
        scroll();
    };
    function $(id){
        return document.getElementById(id);
    }



</script>
</head>
<body>
<!--<div id="mydiv">呵呵</div>-->
    <div id="content"><img src="images/contentpic.jpg" /></div>

    <div id="adv"><img src="images/advpic.jpg" /></div>
    <div id="close"><img src="images/close.jpg" /></div>
</body>
</html></pre>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！