首頁 > web前端 > js教程 > jQuery實作右側顯示可向左滑動展示的深色QQ客服效果碼

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

PHPz
發布: 2018-09-28 16:47:44
轉載
1470 人瀏覽過

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

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

運作效果截圖如下:

線上簡報網址如下:

http://demo.jb51.net/ js/2015/jquery-right-show-qq-online-kf-codes/

具體代碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!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 class="titZx">产品销售</h3>

   <ul>

    <li><span>客服1</span> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <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" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <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" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <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" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:123456:51" alt="售后服务客服" title="售后服务客服" /></a></li>

   </ul>

  </p>

 </p>

</p>

</body>

</html>

登入後複製

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

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板