【 tulaoshi.com - Web开发 】
代码如下：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）!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
titlejQuery的位置函数(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);" /
div2010-03-22/div
div浮动广告/div
div用来撑出滚动条/div
/body
/html
