Code d'effet du service client en ligne sur le côté gauche de la page Web implémenté par jQuery

Code d'effet du service client en ligne sur le côté gauche de la page Web implémenté par jQuery_jquery

WBOY

Libérer： 2016-05-16 15:35:24

original

1655 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet du service client en ligne sur le côté gauche de la page Web implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

C'est un autre code de service client en ligne sur une page Web. C'est bien. Vous pouvez l'utiliser. Qu’est-ce qui le différencie des autres services de service client ? Ce n'est rien de plus que de glisser sur le côté gauche de la page Web pour regrouper les types de service client. Il a une autre fonction, haha.

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-left-online-kf-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>
<title>网页左侧浮动jquery在线QQ客服代码</title>
<style>
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/* QQbox */
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px 0 0 0;position:fixed;}
*html, *html body{background-image:url(about:blank);background-attachment:fixed;}
*html .QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox .press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox .Qlist{float:left;width:410px;background:url(images/bj01.png) no-repeat;background-position:1px 0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox .Qlist .infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox .Qlist .con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox .Qlist .con ul li{height:31px;list-style:none;margin-left:35px;}
.QQbox .Qlist .con ul li a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png) no-repeat;margin-top:-45px;margin-left:220px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<div id="divQQbox" class="QQbox">
 <div id="divOnline" class="Qlist">
  <div class="OnlineLeft">
   <div class="con">
    <ul>
     <li>售前咨询<a target="_blank" href="tencent://message/&#63;uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
      border="0" src="http://wpa.qq.com/pa&#63;p=1:12345678:42"></a></li>
     <li>网站建设<a target="_blank" href="tencent://message/&#63;uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
      border="0" src="http://wpa.qq.com/pa&#63;p=1:12345678:42"></a></li>
     <li>网站优化<a target="_blank" href="tencent://message/&#63;uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
      border="0" src="http://wpa.qq.com/pa&#63;p=1:12345678:42"></a></li>
     <li>整合营销<a target="_blank" href="tencent://message/&#63;uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
      border="0" src="http://wpa.qq.com/pa&#63;p=1:12345678:42"></a></li>
     <li>售后服务<a target="_blank" href="tencent://message/&#63;uin=12345678&&Site=www.cdn.net&&Menu=yes"><img
      border="0" src="http://wpa.qq.com/pa&#63;p=1:12345678:42"></a></li>
    </ul>
   </div>
  </div>
  <div class="OnlineBtn">
  </div>
 </div>
</div>
<script type="text/javascript">
$(function(){
 //建站热线展开效果
 $("#divQQbox").hover(
  function(){
   $(this).stop(true,false);
   $(this).animate({left:0},300); 
  },
  function(){
   $(this).animate({left:-276},149); 
  }
 )
});
</script>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui programment jQuery.