JavaScript浮动广告窗口实例

2015/04/27 48065
浮动广告窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
代码片段
