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/meta name=' keywords ' content=' '/meta name=' description ' content=' '/title jquery橙色右侧抽屉式在线客服代码_我们/title link href=' CSS/lrtk。CSS“rel=”外部no follow“rel=”样式表type=' text/CSS '/script type=' text/JavaScript ' src=' http : js/jquery-1.7。量滴js//script script $(function(){//悬浮窗口$('.Yb _ conct’).悬停(函数(){$(').Yb _ conct’).css('right '，' 5px ')；$('.yb_bar .Yb _ er代码').css('height '，' 200px ')；}，function() {$(' .Yb _ conct’).css('right '，'-127 px ')；$('.yb_bar .Yb _ er代码').css('height '，' 53px ')；});//返回顶部$('.Yb _ top ').单击(function() {$('html，body ').动画({ '滚动顶部' : ' 0px ' }，300)})；});/剧本/床头柜！-代码开始-div=' Yb _ conct ' div=' Yb _ bar ' ul Li class=' Yb _ top '返回顶部/Li Li class=' Yb _ phone ' 400-123-456/Li Li class=' Yb _ QQ ' a target=' _ blank ' href=' http://wpa。QQ。com/msgrd？v=3 uin=123456789站点=QQ菜单=是from=messageisappinstalled=0 ' rel=' external no follow ' title='即刻发送您的需求'在线咨询/a/Li Li class=' Yb _ er code ' style=' height :53 px；'微信二维码br img class=' HD _ QR ' src=' http : images/weixin。jpg ' width=' 125 ' alt='关注你附近/li /ul /div/div代码结束-div style=' text-align : center；余量：50像素0'p使用方法：/pp1，在头区域引入样式表文件lrtk.css/pp2、在头区域引入jquery.js和射流研究…代码/pp3、在你的网页中加入！-代码开始- !-代码结束-注释区域代码/pp4、QQ号码和电话号码，二维码图片修改成你自己的就可以了/p/PP style=' margin 336020 px 0 '/p/div/body/html其中半铸钢钢性铸铁(铸造半钢)样式表代码：

@ charset“utf-8”；/* - 初始化-*/* { margin :0；划水：0;列表样式-:型无；}a，img { border :0 } a { text-decoration : none；color : # 333 } body { color : # 333 font-family : '微软雅黑，凡尔达纳，阿里亚尔，Helvetica，无衬线；线高：20 px溢出-x :隐藏；宽度：100%;高度高度：2000像素字体大小