jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用

代码
<!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>
    <title>jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用</title>
    <style type="text/css">
        #divShow{width:100px;height:50px;background-color:Green;display:none;}
        #divAd{width:100px;height:100px;background-color:Red;position:absolute;top:100px;left:100px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        //在文本框下方显示一个div，类似日历控件那样。
        function showDiv(obj){
            jQuery("#divShow").css("left",jQuery(obj).offset().left);
            jQuery("#divShow").css("top",jQuery(obj).offset().top + jQuery(obj).outerHeight());
            
            jQuery("#divShow").show();
        }
        jQuery(function(){
        
        });
        //滚动条滚动，执行下面的函数，适合做浮动广告
        jQuery(this).scroll(function(){
            jQuery("#divAd").css("top",100 + jQuery(document).scrollTop());
            jQuery("#divAd").css("left",100 + jQuery(document).scrollLeft());
        });
    </script>
</head>
<body>
    <input type="text" value="ok" onclick="showDiv(this);" />
    <div id="divShow">2010-03-22</div>
    <div id="divAd">浮动广告</div>
    <div style="height:2000px;width:2000px;">用来撑出滚动条</div>
</body>
</html>

 

posted @ 2010-03-22 15:25  大气象  阅读(4126)  评论(3)  编辑  收藏  举报
http://www.tianqiweiqi.com