Posted on 2011-11-05 10:01
ZhouFeng 阅读(934)
评论(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里就行了，下面的滚动定位也会简单些
好啦，任务完成，收工，今天周六，把前几天完成的事情记录一下先:)