jQuery implements scrolling layer code that imitates QQ online customer service effect

jQuery implements scrolling layer code that imitates QQ online customer service effect_jquery

WBOY

Release： 2016-05-16 15:36:27

Original

1505 people have browsed it

The example in this article describes the scrolling layer code using jQuery to achieve the effect of imitating QQ online customer service. Share it with everyone for your reference. The details are as follows:

This is a jQuery scroll layer that can be made to imitate QQ online customer service. Although the effect is a bit stiff, the level is so high. The pop-up layer is quite practical. I look forward to everyone's new improvements.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-f-qq-online-style-scroll-style-demo/

The specific code is as follows:

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

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.