jquery to achieve a fixed position in the lower right corner of the Web page the method of closing effects _jquery

The example of this article describes the method of jquery to implement the closed-position of the lower right corner of the Web page. Share to everyone for your reference. Specifically as follows:

HTML code:

<div class= "Tagbox" > <div class= "tag" > <span> Popular Tags ...</span> <ul> <li><a href= ' /tag/js expand _1.html ' target= ' _blank ' >js unwind </a></li> <li><a href= '/tag/js slide _1.html ' target = "_blank" >js slides </a></li> <li><a href= '/tag/js effect _1.html ' target= ' _blank ' >js special effects </a> </li> <li><a href= '/tag/ad code _1.html ' target= ' _blank ' > Advertising code </a></li> <li><a href= '/tag/couplet ads _1.html ' target= ' _blank ' > couplet ads </a></li> <li><a href= '/tag/js pop-up layer _1.html ' target= "_blank" >js pop-up layer </a></li> <li><a href= '/tag/seamless scrolling _1.html ' target= ' _blank ' > seamless scrolling < /a></li> <li><a href= '/tag/php tutorials _1.html ' target= ' _blank ' >php tutorials </a></li> <li ><a href= '/tag/ajax instance _1.html ' target= ' _blank ' >ajax instance </a></li> </ul> </div> <div class= "Guanbi" ><a href= "javascript:;" target= "_blank" > click Close </a></div> </div> <div class= "Zhangkai" ><a "javascript:;"

 > Popular Tags </a></div> <div class= "XX" ></div>

CSS code:

<style type= "Text/css" > ul,li{margin:0px; padding:0px; list-style:none; tagbox{; width:100px; border:1px solid #CCCCCC; Position:fixed;_position:absolute; _margin-top:expression (document.documentelement.clientheight-this.style.pixelheight+ DOCUMENT.DOCUMENTELEMENT.SCROLLTOP); z-index:99; right:0px; bottom:25px; Background-color: #FFFFFF;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} . tag{width:80px; height:auto padding:5px 10px; tag span{width:80px; height:30px; display:block; line-height:30px; co Lor: #006600;
font-size:12px;} . tag li{width:80px; height:24px line-height:24px; font-size:12px; overflow:hidden; tag li a{color: #336699; tag Li A : hover{text-decoration:underline color: #FF0000; guanbi{width:100px; height:26px; Background-color: #F0F0F0; line-height:26px; font-size:12px; Text-align:center;
-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px; . Guanbi a{Color: #666666 tExt-decoration:none;} . zhangkai{width:20px; Height:auto padding:10px 5px; line-height:20px; font-size:14px; text-align:center;- webkit-border-radius:5px 0px 0px 5px;-moz-border-radius:5px 0px 0px 5px;border-radius:5px 0px 0px 5px; border:1px solid #CCCCCC; Position:fixed;_position:absolute; _margin-top:expression (document.documentelement.clientheight-this.style.pixelheight+ DOCUMENT.DOCUMENTELEMENT.SCROLLTOP); z-index:100; right:0px; bottom:50px; Background-color: #FFFFFF;
Display:none;}

 . Zhangkai A{color: #006600; text-decoration:none; xx{height:1000px;} </style>

JS Code:

<script type= "Text/javascript" src= "js/jquery-1.2.6.min.js" ></script>
<script type= "text/" JavaScript ">
  $ (document). Ready (function () {
   $ (". Guanbi a "). Click (function () {
    $ (". Tagbox "). Hide ();
    $ (". Zhangkai"). Show ();
    return false;
   });   
   $ (". Zhangkai"). Click (function () {
    $ (". Zhangkai"). Hide ();
    $ (". Tagbox"). Show (+);
    return false;
   }
); </script>

I hope this article will help you with your jquery programming.