本文实例讲述了jQuery实现底部浮动窗口效果。分享给大家供大家参考，具体如下：

脚本类型=' text/JAVAScript ' src=' http : jquery-1。10 .1 .量滴js '/脚本样式类型=' text/CSS ' # foot _ tel { width :100%；height :43 pxbackground : URL(style/js/swt/tel _ bj _ 20131123。巴布亚新几内亚)无重复中心中心；_ top :表达式(eval(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏右))；z指数： 10000；位置：固定；_ position : absolutebottom :0 pxl eft :0 px } # foot _ TelBox { margin :0 px auto；宽度宽度：1112 pxz-索引： 8999；高度：43px飞越：隐藏；} # foot _ TelBox李{列表式：无；}#foot_telBox .tel _ txt { border :0 pxfloat : leftfont-size :14 px；线高：22 pxheight :22 pxcolor : # 999999 background : none margin :16 px 10px 0 244 px宽度width:160px}#foot_telBox .tel _ sub { border :0 pxfloat : leftheight :25 pxcolor : # 0c 6796 background : URL(style/js/swt/tel _ sub。png)不重复；宽度：92 px光标：指针指针；保证金-top : 14px；} # qqzhenshi { float:left左边距left : 35px } # qqzhenshi a { display : block；宽度： 135像素；height : 20pxmargin : 15px 0px 0px } # foot _ show { width :100%；高度：140 px背景： URL(样式/js/swt/FootADd _ BG。巴布亚新几内亚)；_ top :表达式(eval(文档。文档元素。滚动顶部文档。文档元素。客户身高-这个。偏右))；z指数： 20;位置：固定；_ position : absolutebotom :-140 px；left:0px}。foot _ showBox { width:1000px高度：79 pxmargin 336010 px auto 0px auto }/style div id=' foot _ swt ' div id=' foot _ tel ' div id=' foot _ TelBox ' Li style=' float 3360 left；'输入类型=' text ' onclick=' OpenOLine()；'值='在线问问医生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 : 422 px；向右浮动：列表样式：无；span style='float:左侧；衬垫-top : 14px；宽度width :360 pxtext-align : left ' a style=' display 3360 block ' href=' # # ' target=' _ blank ' img src=' http : style/js/swt/anniu _ 20130627。gif '/a/span span style=' float 3360 right；a href=' # ' target=' _ self ' img src=' http : style/js/swt/tel _ s 4。gif/a/span/Li/div/div id=' foot _ show ' div class=' foot _ show box ' img src=' http : style/js/swt/footadd。png ' alt=' border=' 0 ' usemap=' # Mapfoot '/map name=' Mapfoot ' id=' Mapfoot ' area shape='鼠标悬停(function(){ $(' # foot _ show '))).停止()。动画({'bottom':'0px'}，' fast ')；}) $('#foot_swt ').mouseout(函数(){ $('#foot_show ').停止()。动画({'bottom':'-140px'}，' fast ')；})});函数openOline(){ window.open('### '，' _ blank ')；}/脚本运行效果如下图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。