jQuery는 왼쪽으로 밀어서 표시할 수 있는 오른쪽에 표시되는 다크 QQ 고객 서비스 효과 코드를 구현합니다.
- PHPz앞으로
- 2016-05-16 15:35:301391검색
이 글에서는 주로 오른쪽에 표시되고 왼쪽으로 밀 수 있는 다크 QQ 고객 서비스 효과 코드를 구현하기 위해 jQuery를 소개합니다. 여기에는 페이지 요소 스타일의 동적 변환을 제어하는 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='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>
<p id="floatTools" class="kefu_cs">
<p class="floatL"> <a style="display: block" id="aFloatTools_Show" class="btnOpen" title="查看在线客服" onClick="javascript:$('#pFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#pFloatToolsView').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:$('#pFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#pFloatToolsView').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> </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으로 문의하시기 바랍니다. 삭제