Posted on 2011-11-05 10:01
ZhouFeng 閱讀(955)
評論(0) 編輯 收藏 所屬分類:
原創(chuàng) 、
Web開發(fā)
這個(gè)功能是最近的一個(gè)東東需要，所以關(guān)注了一下，在網(wǎng)上找了一些，感覺都有點(diǎn)復(fù)雜，經(jīng)過一段時(shí)間的學(xué)習(xí)后，終于實(shí)現(xiàn)了一個(gè)稍微簡潔的版本
我是用的wp.qq.com官方網(wǎng)站上的提示完成了，在頁面里定義一個(gè)DIV，里面的內(nèi)容安排就自己確定了，我的代碼如下
<!-- 在線客服部分 -->
<div id="online_box">
<div id="title">
聯(lián)系我們
</div>
<div id="qqlist">
<p>電話:</p>
(028)1234567<br>
(028)1234567<br>
<br>
在線咨詢:
<p>
客服1 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=111111&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:111111:41" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"></a>
</p>
<p>
客服2 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=222222&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:222222:41" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"></a>
</p>
<p>
客服3 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=333333&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:333333:41" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"></a>
</p>
</div>
</div>
<!-- 在線客服部分結(jié)束 -->
那部分<a>...</a>的代碼是在wp.qq.com上拷貝的，網(wǎng)站上還有很多的樣式供選擇，為了適應(yīng)本來的頁面樣式，還得定義該層的樣式，確定顯示位置等，使其更規(guī)范些，我的樣式定義如下
/********************在線服務(wù)部分**********************/
#online_box{
position: absolute;
float: right;
left: 5px;
top: 200px;
z-index: 10;
border: 1px solid #0168b7;
width: 170px;
background-color: white;
text-align: left;
}
#online_box #title{
background-color: #0168b7;
color: white;
font-size: 12;
font-weight: bold;
padding: 10px;
}
#online_box #qqlist{
font-size: 12;
padding: 20px;
}
#online_box #qqlist img{
vertical-align:middle;
}
接下來就是對頁面滾動(dòng)的處理，實(shí)現(xiàn)層的浮動(dòng)，我借用了jQuery來完成的，庫的引入就不必再寫了，下面附上寫的腳本
1 $(document).ready(function(){
2
3 var bodyTop = 0;
4 var selfHeight = $("#online_box").height();
5 if (typeof window.pageYOffset != 'undefined') {
6 bodyTop = window.pageYOffset;
7 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
8 bodyTop = document.documentElement.scrollTop;
9 }else if (typeof document.body != 'undefined') {
10 bodyTop = document.body.scrollTop;
11 }
12 $("#online_box").css("top", bodyTop+document.body.clientHeight-selfHeight-5);
13 });
14
15
16
17 $(window).scroll(function() {
18 var bodyTop = 0;
19 var selfHeight = $("#online_box").height();
20 if (typeof window.pageYOffset != 'undefined') {
21 bodyTop = window.pageYOffset;
22 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
23 bodyTop = document.documentElement.scrollTop;
24 }else if (typeof document.body != 'undefined') {
25 bodyTop = document.body.scrollTop;
26 }
27
28 //靠上端方式
29 //$("#online_box").css("top", 100 + bodyTop);
30
31 //靠下端方式
32 $("#online_box").css("top", bodyTop+document.body.clientHeight-selfHeight-5);
33 });
我采用靠左下的方式顯示，直接在CSS中無法確定靠下顯示的頁面顯示高度，所以在ready()里做了一次定位，如果是按上對齊方式，這部分可以不寫，直接把TOP寫在CSS里就行了，下面的滾動(dòng)定位也會(huì)簡單些
好啦，任務(wù)完成，收工，今天周六，把前幾天完成的事情記錄一下先:)