`
boyliwlove
  • 浏览: 7409 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
天翔1987
文章分类
社区版块
存档分类
最新评论

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果 二

jQueryCSSJavaScript浏览器XHTML 
阅读更多

[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果（二）
     接上文，[原创+源码]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. <link href="window.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

  8. <script type="text/javascript">
  9. $(function(){

  11. //监听按钮事件
  12. $("#btn1").click(function(){
  13. //执行窗口移动效果
  14. MoveWindow();

  16. });
  17. //添加关闭图片的单击事件
  18. $(".title img").click(function(){
  19. //隐藏窗口
  20. $(this).parent().parent().hide('slow');

  22. });



  26. });
  27. function MoveWindow(){

  29. //获取浏览器的宽度
  30. var bwidth=$(window).width();
  31. //获取浏览器的高度
  32. var bheight=$(window).height();
  33. //获取当前窗口宽度
  34. var winwidth=$("#center").width();
  35. //获取当前窗口高度
  36. var winheight=$("#center").height();

  38. //获取滚动条的高度
  39. var sTop=$(window).scrollTop();
  40. //获取滚动条的宽度
  41. var sLeft=$(window).scrollLeft();

  43. //计算窗口距左的距离
  44. var left=sLeft+(bwidth-winwidth)/2;
  45. //计算窗口距上的距离
  46. var top=sTop+(bheight-winheight)/2;
  47. //设置层的位置
  48. $("#center").css("left",left).css("top",top).show("slow");

  50. }
  51. </script>

  53. <title>无标题文档</title>
  54. </head>

  56. <body>

  58. <br><br><br><br><br><br><br><br><br><br>
  59. <br><br><br><br><br><br><br><br><br><br>
  60. <br><br><br><br><br><br><br><br><br><br>
  61. <br><br><br><br><br><br><br><br><br><br>
  62. <br><br><br><br><br><br><br><br><br><br>
  63. <input type="button" id="btn1" value="打开居中窗口" />
  64. <div class="window" id="center">

  66. <div class="title">
  67. <img src="../images/close.jpg" />这里标题文字
  68. </div>
  69. <div class="content">
  70. CSDN中文it社区<br>
  71. CSDN学生大本营 李伟<br>
  72. 3G开发者联盟<br>
  73. 3gput.com
  74. </div>

  76. </div>

  78. </body>
  79. </html>
复制代码

       弹出左下角窗口和弹出居中窗口类似，也是计算下坐标

  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. <link href="window.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

  8. <script type="text/javascript">
  9. $(function(){

  11. //监听按钮事件
  12. $("#btn1").click(function(){

  14. //获取浏览器的宽度
  15. var bwidth=$(window).width();
  16. //获取浏览器的高度
  17. var bheight=$(window).height();
  18. //获取当前窗口宽度
  19. var winwidth=$("#center").outerWidth(true);
  20. //获取当前窗口高度
  21. var winheight=$("#center").outerHeight(true);

  23. //获取滚动条的高度
  24. var sTop=$(window).scrollTop();
  25. //获取滚动条的宽度
  26. var sLeft=$(window).scrollLeft();

  28. //计算窗口距左的距离
  29. var left=0;
  30. //计算窗口距上的距离
  31. var top=sTop+bheight-winheight;
  32. //设置层的位置
  33. $("#center").css("left",left).css("top",top).show("slow");

  35. });
  36. //添加关闭图片的单击事件
  37. $(".title img").click(function(){
  38. //隐藏窗口
  39. $(this).parent().parent().hide('slow');

  41. });


  44. });

  46. </script>

  48. <title>无标题文档</title>
  49. </head>

  51. <body>

  53. <br><br><br><br><br><br><br><br><br><br>
  54. <br><br><br><br><br><br><br><br><br><br>
  55. <br><br><br><br><br><br><br><br><br><br>
  56. <br><br><br><br><br><br><br><br><br><br>
  57. <br><br><br><br><br><br><br><br><br><br>
  58. <input type="button" id="btn1" value="打开左下角窗口" />
  59. <div class="window" id="center">

  61. <div class="title">
  62. <img src="../images/close.jpg" />这里标题文字
  63. </div>
  64. <div class="content">
  65. CSDN中文it社区<br>
  66. CSDN学生大本营 李伟<br>
  67. 3G开发者联盟<br>
  68. 3gput.com
  69. </div>

  71. </div>

  73. </body>
  74. </html>
复制代码

      弹出右下角窗口：弹出右下角窗口我做了很多处理，比如滚动条事件的监听，当滚动条位置移动的时候则移动窗口的位置，同时设置了动画效果，使得窗口的移动显得更加的平滑，代码如下：

  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. <link href="window.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

  8. <script type="text/javascript">
  9. $(function(){

  11. //监听按钮事件
  12. $("#btn1").click(function(){

  14. MoveWindow();

  16. });
  17. //添加关闭图片的单击事件
  18. $(".title img").click(function(){
  19. //隐藏窗口
  20. $(this).parent().parent().hide('slow');

  22. });

  24. //监听滚动条的滚动事件
  25. $(window).scroll(function(){

  27. MoveWindow();

  29. });


  32. });
  33. var timeoutid;
  34. function MoveWindow(){
  35. clearTimeout(timeoutid);
  36. timeoutid=setTimeout(function(){
  37. //获取浏览器的宽度
  38. var bwidth=$(window).width();
  39. //获取浏览器的高度
  40. var bheight=$(window).height();
  41. //获取当前窗口宽度
  42. var winwidth=$("#center").outerWidth(true);
  43. //获取当前窗口高度
  44. var winheight=$("#center").outerHeight(true);

  46. //获取滚动条的高度
  47. var sTop=$(window).scrollTop();
  48. //获取滚动条的宽度
  49. var sLeft=$(window).scrollLeft();

  51. //计算窗口距左的距离
  52. var left1=sLeft+bwidth-winwidth;
  53. //计算窗口距上的距离
  54. var top1=sTop+bheight-winheight;
  55. //设置层的位置,添加动画效果
  56. $("#center").animate({left:left1,top:top1},300).show("slow");


  59. },300);
  60. }

  62. </script>

  64. <title>无标题文档</title>
  65. </head>

  67. <body>

  69. <br><br><br><br><br><br><br><br><br><br>
  70. <br><br><br><br><br><br><br><br><br><br>
  71. <br><br><br><br><br><br><br><br><br><br>
  72. <br><br><br><br><br><br><br><br><br><br>
  73. <br><br><br><br><br><br><br><br><br><br>
  74. <input type="button" id="btn1" value="打开右下角窗口" />
  75. <div class="window" id="center">

  77. <div class="title">
  78. <img src="../images/close.jpg" />CSDN欢迎您
  79. </div>
  80. <div class="content">
  81. 这里是正文部分 hell CSDN
  82. </div>

  84. </div>

  86. </body>
  87. </html>
复制代码

   以上效果在搜狗、IE、火狐测试下均没有问题，粗略之处还请大家多多沟通交流。

分享到：
[原创+源码]jQuery实现弹出居、右下角、 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics