当前位置:Gxlcms > JavaScript > jquery简单的弹出层浮动层代码

jquery简单的弹出层浮动层代码

时间:2021-07-01 10:21:17 帮助过:6人阅读

jquery 智能弹出层,位置可以自适应,当层靠右边显示时自动往左移。初次运行时请按F5刷新,载入远程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. <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
  7. <style>
  8. *{ margin:0; padding:0}
  9. body{ margin:0; padding:0; font-size:12px}
  10. ul,li{ list-style:none}
  11. ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;}
  12. li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px}
  13. li.current{background:#eee}
  14. .wrap{ width:158px; background:#eee; position:absolute;}
  15. </style>
  16. <script type="text/javascript">
  17. $(function(){
  18. $(".wrap").hide();
  19. var objW=$(".wrap").width();
  20. var objH=$(".wrap").height();
  21. $(document).mousedown(function(e){
  22. var selfX=objW+e.pageX;
  23. var selfY=objH+e.pageY
  24. var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft;
  25. var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop;
  26. if(selfX>bodyW && selfY>bodyH){
  27. $(".wrap").css({top:(bodyH-objH),left:(bodyW-objW)}).show();
  28. }else if(selfY>bodyH){
  29. $(".wrap").css({top:(bodyH-objH),left:e.pageX}).show();
  30. }else if(selfX>bodyW){
  31. $(".wrap").css({top:e.pageY,left:(bodyW-objW)}).show();
  32. }else{
  33. $(".wrap").css({top:e.pageY,left:e.pageX}).show();
  34. }
  35. })
  36. $("li").hover(function(){
  37. $(this).addClass("current");
  38. },function(){
  39. $(this).removeClass("current");
  40. }).click(function(){
  41. alert($(this).text())
  42. $(this).parent().parent().hide();
  43. })
  44. })
  45. </script>
  46. </head>
  47. <body>
  48. <div style="height:800px;width:900px"> </div>
  49. <div style="position:absolute;top:300px;left:300px"><span style="color:#f00;font-size:28px">请按F5刷新,才能看到效果,</span><br>点击鼠标左键,弹出层,<br>在最右边点击时
  50. 层自动往左移</div>
  51. <div class="wrap">
  52. <ul onmousedown="event.cancelBubble = true">
  53. <li>连江</li>
  54. <li>宁德</li>
  55. <li>福州</li>
  56. <li>厦门</li>
  57. <li>北京</li>
  58. </ul>
  59. </div>
  60. </body>
  61. </html>

以上就是本文给大家分享的全部内容了,希望大家能够喜欢。

人气教程排行