本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码。分享给大家供大家参考，具体如下：

这是款网页在线客服代码，应用了jquery插件，兼容性不错。默认状态下，客服只显示一个图片按钮，用鼠标点击时展开全部内容，可用作即时通信软件客服，售后客服等，可以作为网站快速通道，方便用户进行相应的操作。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-右上方-文-在线-演示/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .demo _ menu { font-size : 14px文本对齐：中心；margin : 10px 0 0 0 color : # 999线高： 180%;}.demo _ menu b { color: # 333}。演示菜单a .demo_menu a:已访问{ color : # F00 font-size : 14px；}.demo_menu a:悬停{ color : # 090 font-size : 14px；}正文{ background: # ccc}。文本{ font-size : 12px} #福柯{位置：固定；_position:绝对值；_top:表达式(文档元素。滚动顶部20 ' px ')；top : 20pxright : 0；福柯内容框{位置：相对；背景-color : # fff；宽度： 170像素；} #福柯。标题-btn，#福柯qq，#福柯。电话，#福柯。服务，#福柯。在背景：网址(图片/福柯。png)无重复} #福柯标题-BTN {宽度： 33px高度： 97px绝对位置：top : 0；左侧：-33px；} #福柯。福柯span {背景-位置：-129 px 7px；高度： 16pxdisplay:块；} #福柯pad { padding: 16px 10px 10px飞越：隐藏；font-size : 12px} #福柯pad a { text-decoration : none} #福柯QQ {后台-位置： 0-118 px；显示器：内联块；变焦： 1；*显示：内联；左填充left: 16px} #福柯。电话{ height: 28px背景-位置： 0-153像素；margin: 18px 0 } #福柯。服务{ display : inline-block；变焦： 1；*显示：内联；高度： 51px背景-位置： 0-203 px；宽度： 151像素；左边距left: 3px } #福柯。文本{背景色： # ededpadding: 5px 10px文本-居中对齐： } #福柯。关闭{ width : 0；} #福柯。关掉pad，#福柯。关掉text{display: none}p，p a { font-size : 12pxcolor: # 666}/styletitle始终固定在网页右上角的在线客服即时通信软件代码/title meta http-equiv=' X-UA-Compatible ' content=' IE=7 '脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script/headdydiv id='福柯div class=' box-content off ' div class=' title-BTN Cu ' spana href=' # '/a/span/div class=' pad ' a href=' 3358 with TP。QQ。com/av=3uin=12345678 site=QQ menu=yes ' class=' QQ ' style=' margin-right :16 px '售前咨询/aa href=' http://withtp。QQ。com/msgrd？v=3uin=12345678 site=QQ menu=yes ' class=' QQ '广告-合作/a div class=' phone '/div a href=' # ' class=' service ' target=' _ blank '/a/div class=' text '客服时间：(9:00-18:00)br(周六日休息)/div/div/div脚本类型=' text/JavaScript ' $(' .选择')。悬停(function () { $(this)).查找('。msgNav ').show()；}，function () { $(this).查找('。msgNav ').hide()；});$('.标题-BTN ' .切换(函数(){ $(this)).添加CLaSS(' on ')；$(这个)。父代('。框内容')。移除CLaSS(' off ')；}，function () { $(this).移除CLaSS(' on ')；$(这个)。父代('。框内容')。添加CLaSS(' off ')；});/脚本/正文/html希望本文所述对大家jQuery程序设计有所帮助。