首页>>Jquery文字>>页面右侧点击展开的客服菜单，默认隐藏(2018-08-20)

页面右侧点击展开的客服菜单，默认隐藏

页面右侧点击展开的客服菜单，默认隐藏
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="right:-230px;" class="contactusdiyou">  
  2.     <div class="hoverbtn">  
  3.         <span>联</span><span>系</span><span>我</span><span>们</span>  
  4.         <img class="hoverimg" src="images/hoverbtnbg.gif" height="9" width="13">  
  5.     </div>  
  6.     <div class="conter">  
  7.         <div class="con1">   
  8.             <dl class="fn_cle">  
  9.                 <dt><img src="images/tel.png" height="31" width="31"></dt>  
  10.                 <dd class="f1">咨询热线：</dd>  
  11.                 <dd class="f2"><span class="ph_num">111-1234-1234</span></dd>  
  12.             </dl>  
  13.       </div>   
  14.         <div class="blank0"></div>  
  15.         <div class="qqcall">   
  16.             <dl class="fn_cle">  
  17.                 <dt><img src="images/zxkfqq.png" height="31" width="31"></dt>  
  18.                 <dd class="f1 f_s14">在线客服：</dd>  
  19.                 <dd class="f2 kefuQQ">  
  20.                     <span>客服一</span>  
  21.                     <a target="_blank" href=""></a>  
  22.                     <span>客服二</span>  
  23.                     <a target="_blank" href=""></a>  
  24.                 </dd>  
  25.             </dl>  
  26.             <div class="blank0"></div>             
  27.         </div>   
  28.         <div class="blank0"></div>  
  29.         <div class="weixincall">   
  30.             <dl class="fn_cle">  
  31.                 <dt><img src="images/weixin.png" height="31" width="31"></dt>  
  32.                 <dd class="f1">官方微信站：</dd>  
  33.                 <dd class="f3"><img src="images/wechat_code.png" height="73" width="73"></dd>  
  34.             </dl>  
  35.         </div>   
  36.         <div class="blank0"></div>  
  37.         <div class="dytimer">  
  38.             <span style="font-weight: bold;">公司官网：</span>  
  39.             <span><a href="">www.freejs.net</a></span>  
  40.         </div>  
  41.   </div>  
  42. </div>  
  43.   
  44. <div class="diyoumask"></div>  
  45.   
  46. <script type="text/javascript">  
  47. $(function() {  
  48.     $(".contactusdiyou").hover(function() {  
  49.         $(".hoverimg").attr("src","images/hoverbtnbg1.gif");  
  50.         $('.diyoumask').fadeIn();  
  51.         $('.contactusdiyou').animate({right:'0'},300);   
  52.     }, function() {  
  53.         $(".hoverimg").attr("src","images/hoverbtnbg.gif");  
  54.         $('.contactusdiyou').animate({right:'-230px'},300,function(){});  
  55.         $('.diyoumask').fadeOut();  
  56.     });  
  57. });  
  58. </script>  

 


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