Posted on 2011-11-05 10:01
ZhouFeng 閱讀(948)
評論(0) 編輯 收藏 所屬分類:
原創 、
Web開發
這個功能是最近的一個東東需要，所以關注了一下，在網上找了一些，感覺都有點復雜，經過一段時間的學習后，終于實現了一個稍微簡潔的版本
我是用的wp.qq.com官方網站上的提示完成了，在頁面里定義一個DIV，里面的內容安排就自己確定了，我的代碼如下
<!-- 在線客服部分 -->
<div id="online_box">
<div id="title">
聯系我們
</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="點擊這里給我發消息" title="點擊這里給我發消息"></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="點擊這里給我發消息" title="點擊這里給我發消息"></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="點擊這里給我發消息" title="點擊這里給我發消息"></a>
</p>
</div>
</div>
<!-- 在線客服部分結束 -->
那部分<a>...</a>的代碼是在wp.qq.com上拷貝的，網站上還有很多的樣式供選擇，為了適應本來的頁面樣式，還得定義該層的樣式，確定顯示位置等，使其更規范些，我的樣式定義如下
/********************在線服務部分**********************/
#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;
}
接下來就是對頁面滾動的處理，實現層的浮動，我借用了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里就行了，下面的滾動定位也會簡單些
好啦，任務完成，收工，今天周六，把前幾天完成的事情記錄一下先:)