jQuery implementiert den auf der rechten Seite angezeigten dunklen QQ-Kundendiensteffektcode, der durch Verschieben nach links angezeigt werden kann-js-Tutorial-php.cn

jQuery implementiert den auf der rechten Seite angezeigten dunklen QQ-Kundendiensteffektcode, der durch Verschieben nach links angezeigt werden kann

PHPz

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

nach vorne

1406 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um den dunklen QQ-Kundendiensteffektcode zu implementieren, der auf der rechten Seite angezeigt und nach links verschoben werden kann. Es umfasst die Implementierungstechniken von jQuery, die die dynamische Transformation von Seitenelementstilen steuern Referenzwert. Freunde in Not können sich darauf beziehen. Unten sind die Details wie folgt:

Dies ist ein schwarzer QQ-Kundendienstcode, der auf der rechten Seite der Webseite angezeigt wird Der QQ-Kundendienst wird auf der linken Seite erweitert. Ich habe in der Vergangenheit viele Online-Kundendienste veröffentlicht. Sie können nach „Online-Kundendienst“ suchen Schauen Sie im Abschnitt „Spezialeffekte“ auf der Webseite nach, ob Sie einen benötigen.

Ein Screenshot des Laufeffekts lautet wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

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

Die spezifischen Codes lauten wie folgt:

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Kapitels, weitere verwandte Tutorials finden Sie unter jQuery Video Tutorial!