Implement Div, CSS, and JavaScript to hide and reproduce the floating Section

If you frequently access the Internet, you will find some advertisement floating sections. Click to hide, and only a small part of the area is left on the edge. When you move the mouse to the small part of the area, the advertisement is very active again in your sight. In this example, Div, CSS, and JavaScript are used to achieve this effect. It is tested in a variety of browsers.

First, let's take a look. This figure shows the effect of the DIV section floating on the left side of the browser:

It is the effect of hiding the DIV section and leaving only one reproduction arrow.

 

Put it bluntlyCode:

 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >      <  Title > Implement Div, CSS, and JavaScript to hide and reproduce the floating Forum-plan-blog Garden </  Title  >      <  Meta  Name  = "Description"  Content  = "Div, CSS, and javascript can be hidden and reproduced in the floating section. Jihua.cnblogs.com"   />  </  Head  >  < Body  >  <  Div  ID  = "Jiadeframe"  Style  = "Width: 100px; Border: 1px solid #666; Z-index: 3; position: absolute; top: 300px; Right: 1px ;"  >  <  Div  ID  = "Jistmcontent"  >  Content  < BR  />  Content  <  BR  />  Content  <  BR  />  Content  <  BR  /> Content <  BR  /> Content <  BR  /> Content <  BR  /> Content <  BR  /> Content <  BR  />  Content  <  A  Href = "Http://jihua.cnblogs.com"  Target  = "_ Blank"  Style  = "Text-Decoration: none; color: black ;"  > Plan </  A  >  </  Div  >  <  Div  Onmouseover = "Javascript: jihuashowobj ('jiateframework', 'jiatecontent ')"  > <  A  Href  = "Javascript: jiadehideobj ('jiateframework', 'jiatecontent ')"  Style  = "Text-Decoration: none; color: Blue ;"  > <  -  > </  A  > </  Div  >  </ Div  >  <  Script  Language  = "JavaScript"  Type  = "Text/JavaScript"  >      Function  Jiadehideobj (frameid, contentid ){  VaR  Theobj  = Document. getelementbyid (frameid); document. getelementbyid (contentid). style. Display  =   '  None  '  ; Theobj. style. Right  =  (  12   - Parseint (theobj. style. width ))  +   "  Px  "  ;  //  Remember PX jihua.cnblogs.com  }  Function  Jihuashowobj (frameid, contentid ){ VaR  Thecontentobj  =  Document. getelementbyid (contentid );  If  (Thecontentobj. style. Display  =   '  None  '  ) {Thecontentobj. style. Display =   '  Block  '  ; Document. getelementbyid (frameid). style. Right  =   '  1px  '  ;  // Remember PX jihua.cnblogs.com  }}  </  Script  >  </  Body  >  </  Html  > 

 

For the effect, see the right side of the browser.

 

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content plan <->