jquery realizes the bottom floating window effect _jquery

The example in this article describes the effect of jquery implementing the floating window at the bottom. Share to everyone for your reference, specific as follows:

<script type= "Text/javascript" src= "jquery-1.10.1.min.js" ></script> <style type= "Text/css" > #foot _tel {width:100%;height:43px background:url (styles/js/swt/tel_bj_20131123.png) no-repeat Center Center; _top:
Expression (eval (document.documentelement.scrolltop+document.documentelement.clientheight-this.offsetheight)); z-index:10000; position:fixed; _position:absolute; bottom:0px;
left:0px;} #foot_telBox {margin:0px auto;width:1112px; z-index:8999;height:43px overflow:hidden;} #foot_telBox li {list-style:
none;} #foot_telBox. tel_txt {border:0px; float:left; font-size:14px; line-height:22px; height:22px; color: #999999; Background:none; margin:16px 10px 0 244px;
width:160px;} #foot_telBox. tel_sub {border:0px; float:left; height:25px; color: #0C6796; Background:url (styles/js/swt/tel_sub.png) No-repeat;
width:92px;cursor:pointer;margin-top:14px;} #qqzhenshi {float:left;margin-left:35px;} #qqzhenshi a{display:block; height:20px; margin:15px 0px 0px 0px;} #foot_show {width:100% height:140px; Background:url (styles/js/swt/footadd_bg.png); _top:expression (eval (
Document.documentelement.scrolltop+document.documentelement.clientheight-this.offsetheight)); z-index:20; position:fixed; _position:absolute; bottom:-140px;
left:0px;} . foot_showbox{width:1000px;height:79px;margin:10px auto 0px Auto;} </style> <div id= "FOOT_SWT" > <div ID = "Foot_tel" > <div id= "Foot_telbox" > <li style= "float:left;" > <input type= "text" onclick= "Openoline ()" value= "online to ask the Doctor" class= "Tel_txt"/> <input "Button" value= "" onclick= "Openoline ();" class= "Tel_sub"/> </li> <li id= "Qqzhenshi" ><a href= "###" target= "_blank" ></a></li> <li style= "WIDTH:422PX; Float:right;list-style:none; " ><span style= "Float:left; padding-top:14px; width:360px; Text-align:left "><a style=" Display:block href= "###" target= "_blank" ></a></span><span style= "float:right;"
    ><a href= "#" target= "_self" ></a></span></li> </div> </div> <div id= "Foot_show" > <div class= "foot_showbox" > <map name=" mapfoot "id=" Mapfoot "> <area shape= "Rect" coords= "640,10,891,288" href= "###" target= "_blank"/> </map> </div> </div> </di v> <script type= "Text/javascript" > $ (Function () {$ (' #foot_swt '). MouseOver (function () {$ (' #foot_show '). Stop
  (). Animate ({' bottom ': ' 0px '}, ' fast ');
  }) $ (' #foot_swt '). Mouseout (function () {$ (' #foot_show '). Stop (). Animate ({' Bottom ': ' -140px '}, ' fast ');
})
});

 function Openoline () {window.open ("###", "_blank");} </script>

The results of the operation are shown below:

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.