jQuery實現(xiàn)右側顯示可向左滑動展示的深色QQ客服效果代碼
更新時間：2015年10月23日 09:24:58 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)右側顯示可向左滑動展示的深色QQ客服效果代碼,涉及jQuery控制頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)右側顯示可向左滑動展示的深色QQ客服效果代碼。分享給大家供大家參考，具體如下：
這是一個黑色的QQ客服代碼，顯示在網(wǎng)頁右側，點擊后會向左展開QQ客服的完整內容，適用的網(wǎng)站范圍廣，以前發(fā)過不少的在線客服，每一款都風格不同，你可以在網(wǎng)頁特效欄目搜索“在線客服”看下有你需要的不。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/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">產(chǎn)品銷售</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程序設計有所幫助。
您可能感興趣的文章:
- jQuery簡單實現(xiàn)QQ空間點贊已經(jīng)取消點贊
- jQuery+JSON+jPlayer實現(xiàn)QQ空間音樂查詢功能示例
- jquery仿QQ商城帶左右按鈕控制焦點圖片切換滾動效果
- jQuery實現(xiàn)仿QQ在線客服效果的滾動層代碼
- 基于jQuery實現(xiàn)的QQ表情插件
- jQuery實現(xiàn)大轉盤抽獎活動仿QQ音樂代碼分享
- 利用JQuery制作符合Web標準的QQ彈出消息
- jQuery制作仿騰訊web qq用戶體驗桌面
- jquery實現(xiàn)漂浮在網(wǎng)頁右側的qq在線客服插件示例
- 用jquery實現(xiàn)的模擬QQ郵箱里的收件人選取及其他效果(一)
- jquery 仿QQ校友的DIV模擬窗口效果源碼
- jQuery實現(xiàn)仿QQ空間裝扮預覽圖片的鼠標提示效果代碼
相關文章
GridView中獲取被點擊行中的DropDownList和TextBox中的值
本文為大家介紹下如何通過點擊GridView中的a標簽獲取被點擊行中的下拉框和文本框中的值，具體實現(xiàn)嗲嗎如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細介紹了jquery實現(xiàn)垂直手風琴菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導航菜單
這篇文章主要介紹了jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導航菜單,可實現(xiàn)頁面向下滑動后導航欄橫向懸浮并固定在頂部的功能,涉及jQuery事件響應及頁面元素屬性動態(tài)修改相關操作技巧,需要的朋友可以參考下2016-09-09
本篇文章主要是對jquery某一元素重復綁定的問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這里給大家分享的是一段使用EasyUI中實現(xiàn)form表單提交的方法的核心代碼，小伙伴們根據(jù)自己的需求補全form部分吧，希望大家能夠喜歡。2015-03-03
這篇文章主要介紹了jquery實現(xiàn)用戶信息修改驗證輸入方法,實例匯總了jquery常用的提交、驗證、判定、修改等相關技巧,非常實用,需要的朋友可以參考下2015-07-07
這篇文章主要為大家介紹了jQuery初識之設計思想及方法函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
大家總是習慣使用HTML標簽添加自定義屬性來存儲和操作數(shù)據(jù)，所以才在HTML5規(guī)范里增加了一個自定義data屬性，這樣使用更便捷，一起跟隨小編過來看看吧2018-05-05
本文給大家分享的是使用jQuery的masonry庫和infinitescroll庫實現(xiàn)的瀑布流美女圖片展示的實例，效果非常不錯，這里推薦給大家，有需要的小火把可以參考下。2015-04-04
jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細分析了Highcharts插件的功能與具體使用技巧及相關注意事項,需要的朋友可以參考下2016-06-06