JQuery location function instance tutorial
For more information, see. net tutorial/article/22685.htm"> http://www.jb51.net/article/22685.htm
<! 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 location functions (offset (), innerWidth (), innerHeight (), outerWidth (), outerHeight (), scrollTop (), scrollLeft ()) small application </title>
<Style type = "text/css tutorial">
# 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 tutorial" src = "js/jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
// Display a div below the text box, similar to the calendar control.
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 (){
});
// Scroll through the scroll bar and execute the following functions. This function is suitable for floating advertisements.
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"> floating advertisement </div>
<Div style = "height: 2000px; width: 2000px;"> used to support the scroll bar </div>
</Body>
</Html>