A-A+

jQuery页面侧边固定悬浮导航代码(带关闭按钮)

2016年01月10日 web前端设计 暂无评论 阅读 7 views 次

固定悬浮导航效果就是我们常用说的客服代码了,在这里我们一起来看一个兼容性非常强的jQuery页面侧边固定悬浮导航代码(带关闭按钮)例子。

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>  
  3. <head>  
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />  
  5. <title>jQuery页面侧边固定悬浮导航代码(带关闭按钮)</title>  
  6. <link href=”css/style.css” rel=”stylesheet” type=”text/css”/>  
  7. <script type=”text/javascript” src=”js/jquery-1.11.0.min.js”></script>  
  8. <script type=”text/javascript” src=”js/jquery.fixed.js”></script>  
  9. <script type=”text/javascript”>  
  10. $(document).ready(function(){  
  11. var _code = ‘<div id=”fixed”><dl><dd><a href=”#” class=”web”>页游</a></dd><dd><a href=”#” class=”mb”>手游</a></dd><dd><a href=”https://www.xiariboke.com/” target=”_blank” class=”dj”>动漫</a></dd><dd><a href=”https://www.xiariboke.com/” target=”_blank” class=”mh”>漫画</a></dd><dd><a href=”https://www.xiariboke.com/” target=”_blank” class=”dh”>动画</a></dd><dd><a href=”#” class=”pk165″>小说</a></dd><dd><a href=”https://www.xiariboke.com/” class=”w267″>社区</a></dd><dt><a href=”javascript:void(0);” class=”close”></a></dt></dl></div>’;  
  12. $(_code).hide().appendTo(“body”).fixed({x:0,y:0}).fadeIn(500);  
  13. $(“#fixed dt”).click(function(){  
  14. var _left = $(“#fixed”).offset().left;  
  15. if(_left>=0){  
  16. $(“#fixed”).animate({left:-44},300,’swing’,function(){  
  17. $(“#fixed dt a.close”).hide().width(’68px’).fadeIn(500);  
  18. });  
  19. } else {  
  20. $(“#fixed dt a.close”).width(’44px’);  
  21. $(“#fixed”).animate({left:0},300,’swing’,function(){  
  22. });  
  23. }  
  24. });  
  25. });  
  26. </script>  
  27. </head>  
  28. <body>  
  29.    
  30. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  31. <center><h1>jQuery页面侧边固定悬浮导航代码</h1></center>  
  32. <div style=”height:500px;”></div>  
  33. </body>  
  34. </html>  
标签:

给我留言