jQuery實作右側顯示可向左滑動展示的深色QQ客服效果碼-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作右側顯示可向左滑動展示的深色QQ客服效果碼

PHPz

May 16, 2016 pm 03:35 PM

jqueryqq客服

這篇文章主要介紹了jQuery實現右側顯示可向左滑動展示的深色QQ客服效果代碼，涉及jQuery控制頁面元素樣式動態變換的實現技巧，具有一定參考借鑒價值，需要的朋友可以參考下，具體如下：

這是一個黑色的QQ客服代碼，顯示在網頁右側，點擊後會向左展開QQ客服的完整內容，適用的網站範圍廣，以前發過不少的線上客服，每一款都風格不同，你可以在網頁特效欄位搜尋「線上客服」看下有你需要的不。

運作效果截圖如下：

線上簡報網址如下：

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=&#39;true&#39;, startColorstr=&#39;#E5333333&#39;, endColorstr=&#39;#E5333333&#39;);}
.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>
<p id="floatTools" class="kefu_cs">
 <p class="floatL"> <a style="display: block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" onClick="javascript:$(&#39;#pFloatToolsView&#39;).animate({width: &#39;show&#39;, opacity: &#39;show&#39;}, &#39;normal&#39;,function(){ $(&#39;#pFloatToolsView&#39;).show();kf_setCookie(&#39;RightFloatShown&#39;, 0, &#39;&#39;, &#39;/&#39;, &#39;www.baidu.com&#39;); });$(&#39;#aFloatTools_Show&#39;).attr(&#39;style&#39;,&#39;display:none&#39;);$(&#39;#aFloatTools_Hide&#39;).attr(&#39;style&#39;,&#39;display:block&#39;);" href="javascript:void(0);"> 展开</a> <a style="display: none" id="aFloatTools_Hide" class="btnCtn" title="关闭客服" onClick="javascript:$(&#39;#pFloatToolsView&#39;).animate({width: &#39;hide&#39;, opacity: &#39;hide&#39;}, &#39;normal&#39;,function(){ $(&#39;#pFloatToolsView&#39;).hide();kf_setCookie(&#39;RightFloatShown&#39;, 1, &#39;&#39;, &#39;/&#39;, &#39;www.baidu.com&#39;); });$(&#39;#aFloatTools_Show&#39;).attr(&#39;style&#39;,&#39;display:block&#39;);$(&#39;#aFloatTools_Hide&#39;).attr(&#39;style&#39;,&#39;display:none&#39;);" href="javascript:void(0);"> 收缩</a> </p>
 <p id="pFloatToolsView" class="floatR" style="display: none">
  <p class="cn">
   <h3 id="产品销售">产品销售</h3>
   <ul>
    <li><span>客服1</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa?p=2:123456:51"  class="lazy"  border="0"  alt="ShopNC客服1" title="ShopNC客服1" /></a> </li>
    </li>
    <li><span>客服2</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa?p=2:123456:51"  class="lazy"  border="0"  alt="ShopNC客服2" title="ShopNC客服2" /></a></li>
   </ul>
   <h3 id="大宗订制">大宗订制</h3>
   <ul>
    <li><span>订 制</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa?p=2:123456:51"  class="lazy"  border="0"  alt="大宗订制服务" title="大宗订制服务" /></a></li>
   </ul>
   <h3 id="售后服务">售后服务</h3>
   <ul>
    <li><span>售 后</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa?p=2:123456:51"  class="lazy"  border="0"  alt="售后服务客服" title="售后服务客服" /></a></li>
   </ul>
  </p>
 </p>
</p>
</body>
</html>

以上就是本章的全部內容，更多相關教學請訪問jQuery影片教學！

陳述

本文轉載於：脚本之家。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr