jQuery实现仿QQ在线客服效果的滚动层代码
本文实例讲述了jQuery实现仿QQ在线客服效果的滚动层代码。分享给大家供大家参考。具体如下：
这是一款jQuery滚动层，可以做成仿QQ在线客服，虽然效果有点生硬，但水平就这么高了，弹出层是挺实用的，期待大家有新的改进。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-f-qq-online-style-scroll-style-demo/
具体代码如下：
<!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程序设计有所帮助。
-
本文向大家介绍jquery实现楼层滚动效果，包括了jquery实现楼层滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下 html: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现的网页左侧在线客服效果代码，包括了jQuery实现的网页左侧在线客服效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考，具体如下： 这是又一个网页上的在线客服代码，不错，可以用一下哦。与其它客服不一样的地方呢？无非是在网页左侧滑出，可对客服类型分组，又多了一个功能，哈哈。 运行效果截图如下：
-
本文向大家介绍jquery实现仿新浪微博评论滚动效果，包括了jquery实现仿新浪微博评论滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现仿新浪微博评论滚动效果。分享给大家供大家参考。具体如下： 这里使用jquery实现评论滚动效果，仿新浪微博大厅文字滚动效果，以前有不少人膜拜的效果，现在被模仿的到处都是啦，呵呵，今天这个仍是模仿的，评论和头像一起向下滚动，最新的一
-
本文向大家介绍jquery跟随屏幕滚动效果的实现代码，包括了jquery跟随屏幕滚动效果的实现代码的使用技巧和注意事项，需要的朋友参考一下 我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告。那么这是怎么实现的呢？本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解。 一、原始代码 下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮
-
本文向大家介绍jQuery实现无限往下滚动效果代码，包括了jQuery实现无限往下滚动效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现无限往下滚动效果的方法。分享给大家供大家参考，具体如下： 这是仿照腾讯的微薄上的一个效果。滚动条可以无限的网下滚动并且无刷不断从数据库中获取新的数据。 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技
-
本文向大家介绍jQuery实现的网页右下角tab样式在线客服效果代码，包括了jQuery实现的网页右下角tab样式在线客服效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码。分享给大家供大家参考，具体如下： 这是一款网页右下角tab样式的在线客服代码，若在火狐或chrome浏览器下，客服是带边框阴影的，IE8下好像没边框效果，整体