首页>>Jquery文字>>客服代码，主要功能有微信、QQ、电话显示及返回顶部功能(2018-10-14)

客服代码，主要功能有微信、QQ、电话显示及返回顶部功能

客服代码，主要功能有微信、QQ、电话显示及返回顶部功能
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.             <div class="demo">  
  3.                 <div id="service">  
  4.                     <ul>  
  5.                         <li>  
  6.                             <a href="javascript:void(0)" class="weixin_area">  
  7.                                 <img src="images/l02.png" width="47" height="49" class="shows">  
  8.                                 <img src="images/a.png" width="57" height="49" class="hides" style="display: none;">  
  9.                                 <img src="images/weixin.jpg" width="145" class="weixin" style="margin: -100px 57px 0px 0px; display: none;">  
  10.                             </a>  
  11.                         </li>  
  12.                         <li>  
  13.                             <a href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank">  
  14.                                 <div class="hides" style="width: 161px; margin-right: -163px; display: none;" id="qq">  
  15.                                     <div class="hides" id="p1">  
  16.                                         <img src="images/ll04.png">  
  17.                                     </div>  
  18.                                     <div class="hides" id="p2"><span style="color:#FFF;font-size:13px">800022936</span>  
  19.                                     </div>  
  20.                                 </div>  
  21.                                 <img src="images/l04.png" width="47" height="49" class="shows" style="display: block;">  
  22.                             </a>  
  23.                         </li>  
  24.                         <li id="tel">  
  25.                             <a href="javascript:void(0)">  
  26.                                 <div class="hides" style="width: 161px; margin-right: -163px; display: none;" id="tels">  
  27.                                     <div class="hides" id="p1">  
  28.                                         <img src="images/ll05.png">  
  29.                                     </div>  
  30.                                     <div class="hides" id="p3"><span style="color:#FFF;font-size:12px">0551-65371998</span>  
  31.                                     </div>  
  32.                                 </div>  
  33.                                 <img src="images/l05.png" width="47" height="49" class="shows" style="display: block;">  
  34.                             </a>  
  35.                         </li>  
  36.                         <li id="btn">  
  37.                             <a id="top_btn">  
  38.                                 <div class="hides" style="width: 161px; margin-right: -163px; display: none;">  
  39.                                     <img src="images/ll06.png" width="161" height="49">  
  40.                                 </div>  
  41.                                 <img src="images/l06.png" width="47" height="49" class="shows" style="display: block;">  
  42.                             </a>  
  43.                         </li>  
  44.                     </ul>  
  45.                 </div>  
  46.             </div>  
  47.         </div>  
JavaScript Code
  1. <script type="text/javascript">  
  2.             $(function() {  
  3.                 $("#service a").hover(function() {  
  4.                     if ($(this).prop("className") == "weixin_area") {  
  5.                         $(this).children("img.hides").show();  
  6.                     } else {  
  7.                         $(this).children("div.hides").show();  
  8.                         $(this).children("img.shows").hide();  
  9.                         $(this).children("div.hides").animate({marginRight: '0px'}, '0');  
  10.                     }  
  11.                 }, function() {  
  12.                     if ($(this).prop("className") == "weixin_area") {  
  13.                         $(this).children("img.hides").hide();  
  14.                     } else {  
  15.                         $(this).children("div.hides").animate({marginRight: '-163px'}, 0, function() {  
  16.                             $(this).hide();  
  17.                             $(this).next("img.shows").show();  
  18.                         });  
  19.                     }  
  20.                 });  
  21.   
  22.                 $("#top_btn").click(function() {  
  23.                     $("html,body").animate({scrollTop: 0}, 600);  
  24.                 });  
  25.   
  26.                 //右侧导航 - 二维码  
  27.                 $(".weixin_area").hover(function() {  
  28.                     $(this).children(".weixin").show();  
  29.                 },function(){  
  30.                     $(this).children(".weixin").hide();  
  31.                 })  
  32.             });  
  33.         </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_707.html