jQuery实现仿QQ在线客服效果的滚动层代码

本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码。分享给大家供大家参考。具体如下：

这是一款jQuery滚动层，可以做成仿QQ在线客服，虽然效果有点生硬，但水平就这么高了，弹出层是挺实用的，期待大家有新的改进。

运行效果截图如下：

具体代码如下：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>jQuery滚动层，仿QQ在线客服</title>

<style type="text/css">

<!--

#qqonline {

background-color:Yellow;

border: 1px solid #fcc;

position:absolute;

top:250px;

left:18px;

width:200px;

height:120px;

}

-->

</style>

<script type="text/javascript" src="jquery1.3.2.js"></script>

<script type="text/javascript">

$().ready(function(){

$(window).scroll(function() {

window.setTimeout(function(){

var bodyTop = 0;

if (typeof window.pageYOffset != 'undefined') {

bodyTop = window.pageYOffset;

} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {

bodyTop = document.documentElement.scrollTop;

}

else if (typeof document.body != 'undefined') {

bodyTop = document.body.scrollTop;

}

$("#qqonline").css("top", 100 + bodyTop)

$("#qqonline").text(bodyTop);

},300)

})

});

</script>

</head>

<body style="height:1800px">

<div id="qqonline">

QQ在线服务

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。