1.html部分
<!--底部咨詢-->
<div id='botChatRect'>
<div class='chatZxbox'>
<!--第一部分頭部-->
<header class='chatHeader'>
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/heightLine.png" />
<span class='closeChatRect'></span>
<nav>
<p>白癜風專家在線解答</p>
<a href="tel:0551-65692323" class="bdzxTel">
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/addontell.png"> 0551-65692323
</a>
</nav>
</header>
<!--第二部分對話頁面的主節點-->
<div id="jgChatMain">
<!--對話聊天記錄窗口節點-->
<section class='bdChatKuang' id="jgChatHistory">
<div id='nowChatTime' class='nowChatTime'></div>
<!--自動彈出對話-->
<div class="botKefu botKefu1">
<div class='kefuLeft botDuiImg'>
<img src='http://bd.jgyljt.com/jgswt/img/bdjgAddon/dibuxyh.jpg'>
<!--客服消息模塊消息內容-->
<div class="kefuHuida jgLeftMsg">
<i></i>
<p>你好，有什么白斑或白癜風問題，可以咨詢我</p>
</div>
</div>
</div>
<div class="botKefu botKefu2">
<div class='kefuLeft botDuiImg'>
<img src='http://bd.jgyljt.com/jgswt/img/bdjgAddon/dibuxyh.jpg'>
<!--客服消息模塊消息內容-->
<div class="kefuHuida jgLeftMsg">
<i></i>
<p>先了解你的症狀，白斑在哪個部位?</p>
</div>
</div>
</div>
<!--客服消息界面默認-->
<div id="jgNewAgentMsg" class="botKefu" style="display: none;">
<div class="kefuLeft botDuiImg">
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/dibuxyh.jpg" />
<!--客服消息模塊消息內容-->
<div class="kefuHuida jgLeftMsg">
<i></i>客服模板隱藏
</div>
</div>
</div>
<!--客戶消息界面默認html-->
<div id="jgNewClientMsg" class="botKehu" style="display: none;">
<div class="kehuRight botDuiImg">
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/bdToux.png" />
<!--客戶消息模塊消息內容-->
<div class="kehuWenti jgRightMsg">
<i></i> 客戶模板隱藏
</div>
</div>
</div>
<div style="clear:both;"></div>
<!--顯示客服正在輸入的特效-->
<div class="botZhengzai" id="jgNewMsgIng" style="display: none;">
<div>
<div class="duihHzImg"><img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/bdToux.png" /></div>
<div class="duihHzText jgRightMsg"><i></i>客戶模板隱藏
</div>
</div>
</div>
</section>
</div>
<!--第三部分底部發送-->
<footer class='chatBottom' id="jgChatDiv">
<div class="chatBotTel">
<a href="tel:0551-62625555"></a>
</div>
<div class='chatFaMsg'>
<!--客戶輸入的input-->
<input type="text" name="" id="jgChatInput" class="duihIntI" placeholder="請輸入您的問題或電話" />
<!--客戶輸入內容對應的點擊發送按鈕-->
<input type="submit" id="jgChatSendBut" class="duihIntBtn" onclick="jgSendMsg();return false;" value="發送" />
</div>
<!--再次請求對話的Div模塊id-->
<section class="botRechat" id="jgRechat" style="display: none;">
<a class="botRechatZx">
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/zixun.png" /> 繼續咨詢
</a>
<a href="tel:0551-65692323" class="botRechatTel">
<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/tel1.png" /> 電話咨詢
</a>
</section>
<!--蘋果手機百度瀏覽器顯示-->
<div id="botHideShow">
老牌北大-看白癜風-就是放心
</div>
</footer>
</div>
</div>
<!--底部咨詢結束-->
2.css部分
/*底部咨詢開始*/
body {
margin: 0 auto;
padding: 0;
}
#botChatRect{
background:#eee;
box-sizing: border-box;
font-size: 0.28rem;
width: 7.5rem;
z-index: 9999999;
position: fixed;
bottom: 0;
left:50%;
margin-left:-3.75rem;
display:none;
}
/*1.咨詢頭部*/
.chatHeader {
color: #fff;
width: 100%;
height:0.8rem;
background: #393a3f;
position: relative;
top:-0.2rem;
}
.chatHeader>img {
position: absolute;
top: -0.08rem;
width: 100%;
}
.chatHeader .closeChatRect{
line-height:0.8rem;
text-decoration: none;
color: #fff;
text-align:center;
float: left;
width:1.0rem;
height:0.8rem;
background: url('http://bd.jgyljt.com/jgswt/img/bdjgAddon/wechat.png') no-repeat scroll 20px 11px;
}
.chatHeader nav{
height:0.8rem;
}
.chatHeader nav p{
line-height:0.8rem;
}
.chatHeader .bdzxTel{
position:absolute;
top:0.2rem;
color:#fff;
text-decoration:none;;
right:0.1rem;
}
.bdzxTel img{
vertical-align: middle;
width: 0.42rem;
margin-right: 0.1rem;
float:none;
}
/*2.對話頁面*/
.nowChatTime {
font-size:0.28rem;
color: #fff;
text-align: center;
margin-top: 0.1rem;
margin-left: 45%;
border-radius: 3px;
width:1.0rem;
height:0.5rem;
line-height:0.5rem;
background: #ccc;
overflow: hidden;
}
#jgChatMain{
max-height:9.0rem;
overflow-y:scroll;
background:#eee;
}
.bdChatKuang{
margin-bottom:2.0rem;
}
#jgChatHistory{overflow-y:scroll ;}
.botKefu,
.botKehu {
width: 100%;
overflow: hidden;
min-height:1.2rem;
}
.botDuiImg img{
width:2.2rem;
}
.botDuiImg>img{
width: 0.8rem;
}
/*2.1左邊客服*/
.botKefu1,.botKefu2{
display:none;
}
.kefuHuida,.kehuWenti {
position: relative;
float: left;
max-width: 64%;
margin: 0.1rem 0.2rem;
padding: 0.1rem 0.2rem;
border: 1px solid #ccc;
line-height:0.4rem;
background: #fff;
border-radius:5px;
}
.kefuLeft img{
float:left;
margin-left:0.2rem;
}
.kefuHuida i {
position: absolute;
top:0.1rem;
left: -0.18rem;
width:0.2rem;
height:0.2rem;
background:url('http://bd.jgyljt.com/jgswt/img/bdjgAddon/wechat.png') no-repeat scroll 0 -200px;
transform:rotate(-180deg);
}
.kefuHuida p {
line-height: 0.4rem;
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin:0!important;
}
.kefuHuida strong font,
.kefuHuida strong,
.kefuHuida span font {
font-weight: lighter;
}
.kefuHuida font,.kefuHuida div {
font-size: 0.28rem!important;
font-family: "Microsoft YaHei"!important;
}
.kefuHuida button{
background:#f59f2f;
color:#fff;
border:none;
border-radius:5px;
padding:0.1rem;
}
/*2.2右邊客戶*/
.kehuWenti {
float: right;
}
.kehuRight img{
float: right;
margin-right: 0.2rem;
}
.kehuWenti i {
position: absolute;
top:0.1rem;
right: -0.2rem;
width:0.2rem;
height:0.2rem;
background:url('http://bd.jgyljt.com/jgswt/img/bdjgAddon/wechat.png') no-repeat scroll 0 -200px;
}
/*2.3再次請求對話*/
.botRechat{
position:absolute;
top: 0;
width: 7.5rem;
height: 0.9rem;
}
.botRechatZx{
display: inline-block;
width: 50%;
text-align: center;
line-height: 0.9rem;
color: #FFFFFF;
float: left;
background: #ff6005;
}
.botRechatZx img{
vertical-align: middle;
width: 0.46rem;
margin-right: 0.1rem;
}
.botRechatTel{
text-decoration:none;
display: inline-block;
width: 50%;
text-align: center;
line-height: 0.9rem;
color: #FFFFFF;
float: left;
background: #26c540;
}
.botRechatTel img{
vertical-align: middle;
width: 0.46rem;
margin-right: 0.1rem;
}
/*3.底部輸入*/
.chatBottom {
width: 100%;
bottom: 0;
position: absolute;
background: #FFF;
border-top: 1px solid #bfbfbf;
}
.chatBottom .chatBotTel a {
float: left;
width: 15%;
height:1.1rem;
background:url('http://bd.jgyljt.com/jgswt/img/bdjgAddon/wechat.png') no-repeat scroll 9px -89px;
}
/*底部輸入文字*/
#jgChatInput {
outline: none;
width: 65%;
height:0.6rem;
margin-top:0.2rem;
border: none;
border-bottom: 1px solid #ccc;
}
#jgChatSendBut {
outline: none;
width: 18%;
height:0.6rem;
margin-top:0.2rem;
color: #fff;
font-size: 0.3rem;
background: #009944;
border: none;
border-radius:5px;
}
/*蘋果手機百度瀏覽器顯示*/
#botHideShow{
display:none;
width: 100%;
height:1.0rem;
line-height:1.0rem;
text-align: center;
color: #094eaa;
font-size: 0.28rem;
background: #ebf3fb;
}
3.js部分
<script>
/*獲取時間開始*/
var chatTimeNow = new Date();
var chatTimeH = chatTimeNow.getHours();
var chatTimeM = chatTimeNow.getMinutes();
var nowChatTime = document.getElementById("nowChatTime");
getChatTime = function(obj) {
if(obj < 10) return "0" + obj;
else return obj;
}
nowChatTime.innerHTML = getChatTime(chatTimeH) + ":" + getChatTime(chatTimeM);
/*獲取時間結束*/
/*定時顯示對話框*/
var showBotChat = function(num) {
setTimeout(function() {
$('#botChatRect').show();
}, 2000 + 1000 * num);
if(!localStorage.getItem('jgClientMsgCnt')) {
setTimeout(function() {
$('.botKefu1').show();
}, 3000 + 1000 * num);
setTimeout(function() {
$('.botKefu2').show();
}, 4000 + 1000 * num);
}
}
var clickNum = 1;
showBotChat(clickNum);
/*關閉對話框按鈕*/
$('.closeChatRect').on('click', function() {
clickNum++;
$('#botChatRect').hide();
$('.botKefu1').hide();
$('.botKefu2').hide();
showBotChat(clickNum);
})
/*觸摸上拉對話框開始*/
var botChatSlide = document.querySelector('#botChatRect header');
var botChatRect = document.querySelector('#botChatRect');
//獲取設備高度
var deviceHei = document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight;
//綁定事件
botChatSlide.ontouchstart = function(ev) {
/*計算手指剛觸摸時的y坐標*/
var beiginY = ev.targetTouches[0].clientY;
/*盒子原來的高度*/
var firstHei = parseInt(window.getComputedStyle(botChatRect).height);
this.ontouchmove = function(ev) {
/*計算手指滑動時的y坐標*/
var endY = ev.targetTouches[0].clientY
/*計算滑動了多少距離*/
var moveY = (beiginY - endY);
//限制高度
if(((firstHei + moveY) > 250) && ((firstHei + moveY) < (deviceHei * 0.8))) {
/*盒子動態變高度*/
botChatRect.style.height = firstHei + moveY + "px";
document.querySelector('#jgChatHistory').style.height = firstHei + moveY - 120 + "px";
setTimeout(jgScrollPage, 300);
}
}
}
botChatSlide.touchend = function() {
this.ontouchmove = function() {
}
}
/*觸摸上拉對話框結束*/
/*蘋果百度瀏覽器*/
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && /baiduboxapp/i.test(navigator.userAgent)) {
setTimeout(function() {
document.querySelector('#botHideShow').style.display = 'block';
}, 30);
}
/*咨詢對話開始*/
jgSwtConfig.ignoreWelcome = 2; // 忽略咨詢開場白
var myDate = new Date();
var jgJump = false;
if(jgSwtConfig.nightHour > 8) {
jgJump = myDate.getHours() >= jgSwtConfig.nightHour || myDate.getHours() < jgSwtConfig.dayHour;
} else {
jgJump = myDate.getHours() >= jgSwtConfig.nightHour && myDate.getHours() < jgSwtConfig.dayHour;
}
if(jgJump) {
jgSendMsg = function() {
window.location = jgSwtConfig.yejianUrl;
}
} else {
var script = document.createElement('script');
script.src = jgSwtConfig.server + '/jgswt/chat.js';
script.id = 'chatjs';
document.body.appendChild(script);
}
/*咨詢對話結束*/
</script>
