本文實例講述了jQuery實現右側顯示可向左滑動展示的深色QQ客服效果代碼。分享給大家供大家參考，具體如下：
這是一個黑色的QQ客服代碼，顯示在網頁右側，點擊后會向左展開QQ客服的完整內容，適用的網站范圍廣，以前發過不少的在線客服，每一款都風格不同，你可以在網頁特效欄目搜索“在線客服”看下有你需要的不。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-right-show-qq-online-kf-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>一款黑色簡潔大氣的在線客服代碼</title><style>*{margin: 0;padding: 0;}body{text-align: left;font-size: 12px;}.kefu_cs{background: rgba(51, 51, 51, 0.9);position: fixed;top: 130px;right: 1px;_position: absolute;z-index: 999;filter: progid: DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#E5333333', endColorstr='#E5333333');}.kefu_cs a{color: #00A0E9;}.kefu_cs a: hover{color: #ff8100;text-decoration: none;}.kefu_cs .floatL{width: 36px;float: left;position: relative;z-index: 1;}.kefu_cs .floatL a{font-size: 0;text-indent: -999em;display: block;}.kefu_cs .floatR{width: 130px;float: left;padding: 5px;overflow: hidden;}.kefu_cs .floatR .cn{background: #F7F7F7;}.kefu_cs .cn h3{font-size: 14px;color: #333;font-weight: 600;line-height: 24px;padding: 5px}.kefu_cs .cn ul{padding: 0 0 0 8px;}.kefu_cs .cn ul li{line-height: 38px;height: 38px;border-bottom: solid 1px #E6E4E4;overflow: hidden;}.kefu_cs .cn ul li span{color: #777;}.kefu_cs .cn ul li img{vertical-align: middle;}.kefu_cs .btnOpen, .kefu_cs .btnCtn{position: relative;z-index: 9;top: 0;left: 0;background-image: url(images/kefu.png);background-repeat: no-repeat;display: block;width: 20px;height: 146px;padding: 8px;}.kefu_cs .btnOpen{background-position: 0px 0;}.kefu_cs .btnCtn{background-position: -35px 0;}.kefu_cs ul li.top{border-bottom: solid #ACE5F9 1px;}.kefu_cs ul li.bot{border-bottom: none;}</style><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript" src="main.js"></script></head><body><div id="floatTools" class="kefu_cs"> <div class="floatL"> <a style="display: block" id="aFloatTools_Show" class="btnOpen" title="查看在線客服" onClick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show();kf_setCookie('RightFloatShown', 0, '', '/', 'www.baidu.com'); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr('style','display:block');" href="javascript:void(0);"> 展開</a> <a style="display: none" id="aFloatTools_Hide" class="btnCtn" title="關閉客服" onClick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide();kf_setCookie('RightFloatShown', 1, '', '/', 'www.baidu.com'); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr('style','display:none');" href="javascript:void(0);"> 收縮</a> </div> <div id="divFloatToolsView" class="floatR" style="display: none"> <div class="cn"> <h3 class="titZx">產品銷售</h3> <ul> <li><span>客服1</span> <a target="_blank" > <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="ShopNC客服1" title="ShopNC客服1" /></a> </li> </li> <li><span>客服2</span> <a target="_blank" > <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="ShopNC客服2" title="ShopNC客服2" /></a></li> </ul> <h3>大宗訂制</h3> <ul> <li><span>訂 制</span> <a target="_blank" > <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="大宗訂制服務" title="大宗訂制服務" /></a></li> </ul> <h3>售后服務</h3> <ul> <li><span>售 后</span> <a target="_blank" > <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="售后服務客服" title="售后服務客服" /></a></li> </ul> </div> </div></div></body></html>希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
