在文本框下方显示一个div,类似日历控件那样。滚动条滚动,执行下面的函数,适合做浮动广告



jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用_文本框jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用_html_02代码


<!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>