jQuery實(shí)現(xiàn)的網(wǎng)頁右下角tab樣式在線客服效果代碼
更新時(shí)間：2015年10月23日 10:42:35 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁右下角tab樣式在線客服效果代碼,涉及jQuery簡單樣式變換控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)頁右下角tab樣式在線客服效果代碼。分享給大家供大家參考，具體如下：
這是一款網(wǎng)頁右下角tab樣式的在線客服代碼，若在火狐或chrome瀏覽器下，客服是帶邊框陰影的，IE8下好像沒邊框效果，整體不如在Chrome、火狐、Opera瀏覽器下。這款在線客服代碼的底部使用了TAB選項(xiàng)卡的樣式，鼠標(biāo)點(diǎn)擊可切換客服的內(nèi)容，還是挺新穎的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-right-buttom-tab-style-online-demo/
具體代碼如下：
<!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>網(wǎng)頁右下角tab樣式的在線客服代碼</title>
<style>
.contact-bar{position: fixed;bottom: 0;right: 0;width: 400px;overflow: hidden;z-index: 9999}
.contact-bar .cb-btn{float: left;position: relative;height: 38px;font-size: 12px;line-height: 40px;text-transform: uppercase;border: 1px solid #000;border-left: none;color: #FFF;background-color: #292929;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(41,41,41)), to(rgb(0,0,0)));background-image: -webkit-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -moz-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -o-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: -ms-linear-gradient(top, rgb(41,41,41), rgb(0,0,0));background-image: linear-gradient(top, rgb(41,41,41), rgb(0,0,0));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#292929', EndColorStr='#000000');-moz-box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534;-webkit-box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534;box-shadow: inset 1px 0 0 #343534, inset 0 1px 0 #343534}
.contact-bar .cb-btn: hover, .contact-bar .cb-btn-hover{background-color: #4e4e4e;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78,78,78)), to(rgb(39,39,39)));background-image: -webkit-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -moz-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -o-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: -ms-linear-gradient(top, rgb(78,78,78), rgb(39,39,39));background-image: linear-gradient(top, rgb(78,78,78), rgb(39,39,39));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#4e4e4e', EndColorStr='#272727');-moz-box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;-webkit-box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;box-shadow: inset 1px 0 0 #5a5b5a, inset 0 1px 0 #5a5b5a;cursor: pointer}
.contact-bar .cb-btn-selected, .contact-bar .cb-btn-selected: hover, .contact-bar .cb-btn-selected.cb-btn-hover{background-image: none;background-color: #232423;-moz-box-shadow: inset 0 5px 20px black;-webkit-box-shadow: inset 0 5px 20px black;box-shadow: inset 0 5px 20px black}
.contact-bar .cb-btn.cb-chat, .contact-bar .cb-btn.cb-phone{width: 178px}
.contact-bar .cb-btn.cb-chat{border-left: 1px solid #000}
.contact-bar .cb-btn-selected.cb-chat{-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0}
.contact-bar .cb-chat .cb-btn-text{background: url(images/cb-icon-livechat.png) no-repeat 12px 14px}
.contact-bar .cb-phone .cb-btn-text{background: url(images/cb-icon-phone.png) no-repeat 14px 11px}
.contact-bar .cb-btn-text{float: left;height: 38px;padding-left: 40px;font-weight: bold}
.contact-bar .cb-kb, .cb-twitter, .cb-facebook{width: 40px;text-indent: -3000em}
.contact-bar .cb-kb span, .contact-bar .cb-twitter span, .contact-bar .cb-facebook span{float: left;width: 100%}
.contact-bar .cb-kb span{background: url(images/cb-icon-kb.png) no-repeat center center}
.contact-bar .cb-twitter span{background: url(images/cb-icon-twitter.png) no-repeat center center}
.contact-bar .cb-facebook span{background: url(images/cb-icon-facebook.png) no-repeat center center}
.cb-status{position: absolute;right: 0;width: 10px;height: 10px;margin: 15px 10px 16px 0}
.cb-online{background: url(images/cb-status-online.png) no-repeat center center}
.cb-offline{background: url(images/cb-status-offline.png) no-repeat center center}
.cb-popup{z-index: 9998;position: fixed;bottom: 0;right: 0;width: 400px;padding-bottom: 40px;background-color: #FFF;-webkit-border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;border-top-left-radius: 5px;-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);box-shadow: 0 1px 10px rgba(0, 0, 0, 0.36)}
.cb-popup-toolbar{width: 380px;line-height: 10px;padding: 5px 10px}
.cb-popup-close{padding: 5px;font-size: 18px;font-weight: bold;position: absolute;right: 0;top: 0}
.cb-popup-close: hover{cursor: pointer}
.cb-popup-inner{padding: 50px 0;width: 400px;text-align: center}
.cb-popup.chat-invitation{background-color: transparent;height: 168px}
.cb-popup.call-us{height: 168px}
.cb-popup.chat-invitation .cb-popup-close{color: #FFF;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);z-index: 99999}
.cb-popup #eye-catcher{float: left;margin-top: -10px}
.cb-popup #eye-catcher a{background: url(images/livechat.png) no-repeat;height: 170px;width: 400px;display: block;text-indent: -999em}
.cb-popup p{color: #999}
.cb-popup .cb-btn{text-align: center;border: 1px solid #043b8f;color: #FFF;line-height: 20px;font-weight: bold;text-decoration: none;background-color: #49bae3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(73,186,227)), to(rgb(42,73,180)));background-image: -webkit-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -moz-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -o-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: -ms-linear-gradient(top, rgb(73,186,227), rgb(42,73,180));background-image: linear-gradient(top, rgb(73,186,227), rgb(42,73,180));filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#49bae3', EndColorStr='#2a49b4');-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-box-shadow: inset 0 1px 2px #25daee;-webkit-box-shadow: inset 0 1px 2px #25daee;box-shadow: inset 0 1px 2px #25daee;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)}
.cb-btn.cb-btn-first{margin-left: 0}
.cb-btn.cb-btn-last{margin-right: 0}
.cb-form .cb-btn{width: 100%}
.cb-popup .contact-phone{font-size: 30px;font-weight: bold;line-height: 1;margin-bottom: .25em}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".cb-popup-close").click(function() {
$(".cb-popup").hide();
});
$(".cb-chat").click(function() {
$(".call-us").hide();
$(".chat-invitation").toggle();
});
$(".cb-phone").click(function() {
$(".chat-invitation").hide();
$(".call-us").toggle();
});
});
</script>
</head>
<body style="height:1200px;">
<div class="contact-bar">
<div class="cb-btn cb-phone"> <span class="cb-btn-text">123456</span> <span class="cb-status cb-online"> </span> </div>
<div class="cb-btn cb-chat"> <span class="cb-btn-text">在線客服</span> <span class="cb-status cb-online"> </span> </div>
<div class="cb-btn cb-kb"> <a href="#" target="_blank" title="腳本之家"><span class="cb-btn-img">腳本之家</span></a> </div>
</div>
<div class="call-us cb-popup">
<div class="cb-popup-toolbar"> <span class="cb-popup-close">×</span> </div>
<div class="cb-popup-inner">
<div class="popup-contactInfo">
<div class="contact-phone">123456789</div>
</div>
<p>歡迎加入QQ群<a target="_blank" ><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="歡迎加入QQ群" title="歡迎加入QQ群"></a> </p>
</div>
</div>
<div class="chat-invitation cb-popup" style="display: none;" >
<div class="cb-popup-toolbar"> <span class="cb-popup-close">×</span> </div>
<div id="eye-catcher"> <a href="#" onClick="javascript:window.open('http://wp.qq.com/wpa/qunwpa?idkey=4bf27be4ad1c0d244515000be05d9c0efbb2c52ae1feb7247a40950720', '_blank', 'height=405, width=506,toolbar=no,scrollbars=no,menubar=no,status=no');; return false;" title="點(diǎn)擊與在線客服交談">在線客服</a> </div>
</div>
</body>
</html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery Mobile 是用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開發(fā)框架。這篇文章主要介紹了jQuery Mobile頁面返回不需要重新get 的相關(guān)資料,需要的朋友可以參考下2016-04-04
輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法實(shí)例
這篇文章主要介紹了輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法,實(shí)例分析了jquery遮罩層插件的定義、功能及使用方法,非常簡單實(shí)用,需要的朋友可以參考下2015-07-07
這篇文章對(duì)于剛開始學(xué)習(xí)jquery的css 選擇器的朋友是個(gè)不錯(cuò)的參考，大家可以看實(shí)例演示即可。2010-05-05
jQuery中通過ajax調(diào)用webservice傳遞數(shù)組參數(shù)的問題實(shí)例詳解
本文通過實(shí)例給大家詳細(xì)介紹jQuery中通過ajax調(diào)用webservice傳遞數(shù)組參數(shù)的相關(guān)資料,需要的朋友可以參考下2016-05-05
jquery 多個(gè)radio的click事件實(shí)例
下面小編就為大家?guī)硪黄猨query 多個(gè)radio的click事件實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
推薦11款jQuery開發(fā)的復(fù)選框和單選框美化插件
web開發(fā)中所有的輸入控件中復(fù)選框和單選框的樣式是最難去設(shè)計(jì)的，因?yàn)椴煌臑g覽器及其操作系統(tǒng)對(duì)于樣式的渲染展現(xiàn)是不一樣的。2011-08-08
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗(yàn)2011-12-12
jq checkbox 的全選并ajax傳參的實(shí)例
下面小編就為大家?guī)硪黄猨q checkbox 的全選并ajax傳參的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了jquery多級(jí)樹形下拉菜單的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
jQuery是一個(gè)JavaScript庫，它簡化了客戶端JavaScript編程的過程，特別是針對(duì)HTML文檔遍歷和操作、事件處理、動(dòng)畫效果和Ajax操作。感興趣的小伙伴可以參考閱讀2023-04-04