jQuery melaksanakan kod kesan perkhidmatan pelanggan QQ gelap yang dipaparkan di sebelah kanan yang boleh dipaparkan dengan meluncur ke kiri-tutorial js-php.cn

jQuery melaksanakan kod kesan perkhidmatan pelanggan QQ gelap yang dipaparkan di sebelah kanan yang boleh dipaparkan dengan meluncur ke kiri

PHPz

Lepaskan： 2018-09-28 16:47:44

ke hadapan

1404 orang telah melayarinya

Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan kod kesan perkhidmatan pelanggan QQ yang boleh dipaparkan di sebelah kanan dan meluncur ke kiri Ia melibatkan teknik pelaksanaan jQuery yang mengawal transformasi dinamik gaya elemen halaman nilai rujukan. Rakan-rakan yang memerlukan boleh merujuknya di bawah, butirannya adalah seperti berikut:

Ini adalah kod perkhidmatan pelanggan QQ, dipaparkan di sebelah kanan halaman web of QQ perkhidmatan pelanggan akan berkembang ke kiri Ia adalah terpakai kepada pelbagai laman web Saya telah menyiarkan banyak perkhidmatan pelanggan dalam talian, setiap model mempunyai gaya yang berbeza bahagian kesan khas halaman web untuk melihat sama ada terdapat satu yang anda perlukan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan bab ini, lebih berkaitan Untuk tutorial, sila lawati Tutorial Video jQuery!