recherche

Maison  >  Article  >  interface Web  >  jQuery implémente un code de couche de défilement qui imite le service client en ligne QQ effect_jquery

jQuery implémente un code de couche de défilement qui imite le service client en ligne QQ effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:36:271494parcourir

L'exemple de cet article décrit le code de la couche de défilement utilisant jQuery pour obtenir l'effet d'imiter le service client en ligne de QQ. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une couche de défilement jQuery qui peut être créée pour imiter le service client en ligne de QQ. Bien que l'effet soit un peu raide, le niveau est tellement élevé que j'attends avec impatience les nouvelles améliorations de chacun. .

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

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

J'espère que cet article sera utile à la programmation jQuery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Code JavaScript pur pour réaliser le déverrouillage des dessins sur les appareils mobiles_compétences JavascriptArticle suivant：Code JavaScript pur pour réaliser le déverrouillage des dessins sur les appareils mobiles_compétences Javascript

Articles Liés

Voir plus