首页>>Jquery文字>>右侧悬浮菜单-不滚动,鼠标经过显示详情(2017-09-25)

右侧悬浮菜单-不滚动,鼠标经过显示详情

右侧悬浮菜单-不滚动,鼠标经过显示详情
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="slide">  
  2.         <ul class="icon">  
  3.             <li class="up" title="上一页"></li>  
  4.             <li class="qq"></li>  
  5.             <li class="tel"></li>  
  6.             <li class="wx"></li>  
  7.             <li class="down" title="下一页"></li>  
  8.         </ul>  
  9.         <ul class="info">  
  10.             <li class="qq">  
  11.                 <p>在线沟通，请点我<a href="http://wpa.qq.com/msgrd?v=3&uin=63752364&site=qq&menu=yes" target="_blank">在线咨询</a></p>  
  12.             </li>  
  13.             <li class="tel">  
  14.                 <p>咨询热线：<br>123-456-8888<br>客服qq：<br>63752364</p>  
  15.             </li>  
  16.             <li class="wx">  
  17.                 <div class="img"><img src="img/ewm.png"></div>  
  18.             </li>  
  19.         </ul>  
  20.     </div>  
  21.     <div id="btn" class="index_cy"></div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.     $(function(){  
  3.       
  4.         $('.slide .icon li').not('.up,.down').mouseenter(function(){  
  5.             $('.slide .info').addClass('hover');  
  6.             $('.slide .info li').hide();  
  7.             $('.slide .info li.'+$(this).attr('class')).show();//.slide .info li.qq  
  8.         });  
  9.         $('.slide').mouseleave(function(){  
  10.             $('.slide .info').removeClass('hover');  
  11.         });  
  12.           
  13.         $('#btn').click(function(){  
  14.             $('.slide').toggle();  
  15.             if($(this).hasClass('index_cy')){  
  16.                 $(this).removeClass('index_cy');  
  17.                 $(this).addClass('index_cy2');  
  18.             }else{  
  19.                 $(this).removeClass('index_cy2');  
  20.                 $(this).addClass('index_cy');  
  21.             }  
  22.               
  23.         });  
  24.           
  25.     });  
  26.     </script>  

 


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