jQuery實現的網頁左側在線客服效果代碼
更新時間：2015年10月23日 10:20:21 作者：企鵝
這篇文章主要介紹了jQuery實現的網頁左側在線客服效果代碼,涉及簡單的jQuery頁面動畫顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery實現的網頁左側在線客服效果代碼。分享給大家供大家參考，具體如下：
這是又一個網頁上的在線客服代碼，不錯，可以用一下哦。與其它客服不一樣的地方呢？無非是在網頁左側滑出，可對客服類型分組，又多了一個功能，哈哈。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-left-online-kf-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>網頁左側浮動jquery在線QQ客服代碼</title>
<style>
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/* QQbox */
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px 0 0 0;position:fixed;}
*html, *html body{background-image:url(about:blank);background-attachment:fixed;}
*html .QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox .press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox .Qlist{float:left;width:410px;background:url(images/bj01.png) no-repeat;background-position:1px 0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox .Qlist .infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox .Qlist .con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox .Qlist .con ul li{height:31px;list-style:none;margin-left:35px;}
.QQbox .Qlist .con ul li a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png) no-repeat;margin-top:-45px;margin-left:220px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="divQQbox" class="QQbox">
<div id="divOnline" class="Qlist">
<div class="OnlineLeft">
<div class="con">
<ul>
<li>售前咨詢<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>網站建設<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>網站優(yōu)化<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>整合營銷<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
<li>售后服務<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li>
</ul>
</div>
</div>
<div class="OnlineBtn">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//建站熱線展開效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
</script>
</body>
</html>
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
自制一個簡潔的tabs插件還是有必要的在設計之前，先整理好思路，實現tabs，自動輪換，ajax等主要功能，然后是dom的排列形式，這里采用傳統(tǒng)的2010-07-07
zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件。接下來通過本文給大家分享ztree實現左邊動態(tài)生成樹右邊為內容詳情功能，需要的朋友參考下吧2017-11-11
在我的頁面處理中有時需要進行表單處理，需要一個用戶可以添加修改多條記錄。2011-03-03
下面小編就為大家?guī)硪黄昝澜鉀QjQuery的hover事件在IE中不停閃動的問題。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細介紹了jQuery實現簡單QQ聊天框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
據統(tǒng)計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。2011-08-08
本篇文章主要介紹了Easyui筆記2：實現datagrid多行刪除，詳細介紹了完成一個多行勾選并刪除的功能。有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細介紹了jQuery實現簡單全選框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了ajax與json 獲取數據并在前臺使用簡單實例的相關資料,需要的朋友可以參考下2017-01-01
解析prototype,JQuery中跳出each循環(huán)的方法
這篇文章主要介紹了在prototype,JQuery中跳出each循環(huán)的方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12