CSS
体
{
保证金：0px
}
main_head。
{
背景：URL（考试 / / img3-5_2 JS。PNG）不重复；
}
* html.main_head
{
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（src=中 / / img3-5_2 PNG JS。
背景：没有透明滚动重复0% 0%；
}
* + html.main_head
{
背景：URL（考试 / / img3-5_2 JS。PNG）不重复；
}
。信息
{
座垫：10px；
左：0px填充；
填充右：0px；
背景：URL（考试 / / img3-5_3 JS。PNG）纵向平铺；
5px垫上：
}
* HTML信息
{
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（src=中 / / img3-5_3 PNG JS。
背景：纵向重复重复；
}
* html。
{
座垫：10px；
左：0px填充；
填充右：0px；
背景：URL（考试 / / img3-5_3 JS。PNG）纵向平铺；
5px垫上；
}
down_kefu。
{
宽度：157px；
背景：URL（考试 / / img3-5_4 JS。PNG）不重复；
身高：8px
}
* html.down_kefu
{
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（src=中 / / img3-5_4 PNG JS。
宽度：157px；
背景：纵向重复重复；
身高：8px
}
* + html.down_kefu
{
宽度：157px；
背景：URL（考试 / / img3-5_4 JS。PNG）不重复；
身高：8px
}
。OBTN
{
边距：104px；
宽度：32px；
背景：URL（考试 / / img3-5_1 JS。PNG）不重复；
浮点数：左；
身高：139px；
margin-left: - 5px
}
* OBTN HTML。
{
过滤器：ProgID：DXImageTransform.Microsoft.AlphaImageLoader（src=中 / / img3-5_1 PNG JS。
宽度：32px；
背景：没有透明滚动重复0% 0%；
浮点数：左；
身高：139px
}
* + OBTN HTML。
{
边距：104px；
宽度：32px；
背景：URL（考试 / / img3-5_1 JS。PNG）不重复；
浮点数：左；
身高：139px；
margin-left: - 5px；
}
qqtable跨度。
{
座垫：5px；
行高：20px；
左：0px填充；
宽度：100px；
填充右：0px；
颜色：# ff6600；
字体大小：13px；
字体粗细：粗体；
5px垫上：
}
qqtable一。
{
文字装饰：无；
}
qqtable：悬停。
{
文字装饰：无
}
。群
{
底部边框：# ffd2bf 1px solid；
左边界：# ffd2bf 1px solid；
座垫：5px；
行高：20px；
背景颜色：# ffffff；
左：0px填充；
宽度：100px；
填充右：0px；
字体大小：12px；
边境上：# ffd2bf 1px solid；
边境：# ffd2bf 1px solid；
5px垫上：
}
群跨度。
{
颜色：# ff6600；
字体大小：13px；
字体粗细：粗体；
}
HTML
QQ：88888888
QQ：88888888
成员交换组123456
商业交易所集团654321
js
客服=功能（ID，_top，_left）{
我document.getelementbyid VaR（ID）；
VaR D1 = document.body；
VaR D2 = document.documentelement；
D1.style.height=d2.style.height='100%';
我的风格。最高_top + 'px；
我的风格。左= _left +PX；
我的位置=绝对的风格；
函数A（）
{
我的风格。= parseInt（我的风格。顶部）+（Math.max（d1.scrolltop，D2。scrollTop）+ _top-parseint（我的风格。顶部））* 0.1 + 'px；
}
setInterval（一，10 + parseInt（Math.random）*（20））；
}
窗口。指针函数（）{
Kefu（'softwhy'，100，152）
}
VaR intertime = 1；
VaR最大= 1；
无功minwidth = - 152；
无功numinter = 10；
Var BigInter；
Var SmallInter；
var o = document.getelementbyid（softwhy ）；
var i = parseInt（o.style。左）；
函数大（）
{
如果（parseInt（o.style。左）< maxwidth）
{
我= parseInt（o.style。左）；
我numinter + =；
o.style。左=我+PX；
如果（我= = maxwidth）
ClearInterval（biginter）；
}
}
大（）函数
{
ClearInterval（smallinter）；
biginter = setInterval（大，intertime）；
}
函数小（）
{
如果（parseInt（o.style。左）> minwidth）
{
我= parseInt（o.style。左）；
我= i-numinter；
o.style。左=我+PX；
如果（我= = minwidth）
ClearInterval（smallinter）；
}
}
以（）函数
{
ClearInterval（biginter）；
smallinter = setInterval（小intertime）；
}
上面的代码实现了我们希望在Web页面的一侧浮动的客户服务系统。下面简要介绍如何实现第二个效果。
1。实现原则：
在整个客户服务系统的softwhy对象设置为绝对定位，然后把属性值设置为默认状态下的一个适当的负价值，所以它的主要部分将被隐藏，只显示提示部分。
隐藏在默认状态下的主体部分。
显示在默认状态中的提示部分。
当鼠标放在提示部分（即放在softwhy对象），通过调用相应的函数，使用setInterval（）不断增加左边的属性值，我们可以逐步显示客户服务主体的影响。当鼠标离开softwhy对象，调用相应的功能和使用setInterval（）不断降低左属性值来实现对客户服务的主要部分逐渐隐藏。
softwhy对象上的属性值可能是困难的，它的实现是在滚动，客户服务系统有一个任性的弹性的感觉，并最终可固定在垂直位置，从窗口100px顶部，这种影响是一个组合的功能和setInterval（一，10 + parseInt（随机数学。）（* 20））来实现的，这里简单介绍一个函数的原理，主要是一个数学问题：
我们想达到的效果是，无论怎样拖动滚动条，客户服务系统最终将在垂直位置从窗边100px，也就是说，只要最高属性值设置为d1.scrolltop或d2.scrolltop和100px金额确定。以下是一个功能简单的分析：
math.max（d1.scrolltop，D2。scrollTop）+ _top-parseint（我的风格。顶部），math.max（d1.scrolltop，D2。scrollTop）在+ _top me.style.top的最终值，通过使用setInterval（）函数执行一个函数，它是parseInt连续实施（我的风格。顶部）+（Math.max（d1.scrolltop，D2。scrollTop）+ _top-parseint（我的风格。上）我的风格。最高math.max（* 0.1 + 'px），当d1.scrolltop，+ _top，D2。scrollTop）客户服务系统是固定在指定的位置。
以上是本文的全部内容，希望大家能喜欢。
