JQuery implements floating window at the bottom, while jquery implements floating window

JQuery implements floating window at the bottom, while jquery implements floating window

This example describes how jQuery achieves a floating window at the bottom. We will share this with you for your reference. The details are 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_20131043.png) no-repeat center; _ top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. 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; width: 135px; height: 20px; margin: 15px 0px 0px;} # foot_show {width: 100%; height: 140px; background: url (styles/js/swt/footAdd_bg.png); _ top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. ); 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 ask Doctor "class =" tel_txt "/> <input type =" 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 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> <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 running effect is as follows: