[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(二)
接上文,[原创+源码]jQuery实现弹出居、右下角、左下角窗口效果(一)我们先来看看怎么实现弹出居中窗口,弹出居中窗口主要是要获取几个参数,分别为浏览器的高度、宽度
当前窗口的高度、宽度,滚动条滚动的高度和宽度等,然后再定位这个层。
代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link href="window.css" type="text/css" rel="stylesheet" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- //监听按钮事件
- $("#btn1").click(function(){
- //执行窗口移动效果
- MoveWindow();
- });
- //添加关闭图片的单击事件
- $(".title img").click(function(){
- //隐藏窗口
- $(this).parent().parent().hide('slow');
- });
- });
- function MoveWindow(){
- //获取浏览器的宽度
- var bwidth=$(window).width();
- //获取浏览器的高度
- var bheight=$(window).height();
- //获取当前窗口宽度
- var winwidth=$("#center").width();
- //获取当前窗口高度
- var winheight=$("#center").height();
- //获取滚动条的高度
- var sTop=$(window).scrollTop();
- //获取滚动条的宽度
- var sLeft=$(window).scrollLeft();
- //计算窗口距左的距离
- var left=sLeft+(bwidth-winwidth)/2;
- //计算窗口距上的距离
- var top=sTop+(bheight-winheight)/2;
- //设置层的位置
- $("#center").css("left",left).css("top",top).show("slow");
- }
- </script>
- <title>无标题文档</title>
- </head>
- <body>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <input type="button" id="btn1" value="打开居中窗口" />
- <div class="window" id="center">
- <div class="title">
- <img src="../images/close.jpg" />这里标题文字
- </div>
- <div class="content">
- CSDN中文it社区<br>
- CSDN学生大本营 李伟<br>
- 3G开发者联盟<br>
- 3gput.com
- </div>
- </div>
- </body>
- </html>
弹出左下角窗口和弹出居中窗口类似,也是计算下坐标
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link href="window.css" type="text/css" rel="stylesheet" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- //监听按钮事件
- $("#btn1").click(function(){
- //获取浏览器的宽度
- var bwidth=$(window).width();
- //获取浏览器的高度
- var bheight=$(window).height();
- //获取当前窗口宽度
- var winwidth=$("#center").outerWidth(true);
- //获取当前窗口高度
- var winheight=$("#center").outerHeight(true);
- //获取滚动条的高度
- var sTop=$(window).scrollTop();
- //获取滚动条的宽度
- var sLeft=$(window).scrollLeft();
- //计算窗口距左的距离
- var left=0;
- //计算窗口距上的距离
- var top=sTop+bheight-winheight;
- //设置层的位置
- $("#center").css("left",left).css("top",top).show("slow");
- });
- //添加关闭图片的单击事件
- $(".title img").click(function(){
- //隐藏窗口
- $(this).parent().parent().hide('slow');
- });
- });
- </script>
- <title>无标题文档</title>
- </head>
- <body>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <input type="button" id="btn1" value="打开左下角窗口" />
- <div class="window" id="center">
- <div class="title">
- <img src="../images/close.jpg" />这里标题文字
- </div>
- <div class="content">
- CSDN中文it社区<br>
- CSDN学生大本营 李伟<br>
- 3G开发者联盟<br>
- 3gput.com
- </div>
- </div>
- </body>
- </html>
弹出右下角窗口:弹出右下角窗口我做了很多处理,比如滚动条事件的监听,当滚动条位置移动的时候则移动窗口的位置,同时设置了动画效果,使得窗口的移动显得更加的平滑,代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <link href="window.css" type="text/css" rel="stylesheet" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- //监听按钮事件
- $("#btn1").click(function(){
- MoveWindow();
- });
- //添加关闭图片的单击事件
- $(".title img").click(function(){
- //隐藏窗口
- $(this).parent().parent().hide('slow');
- });
- //监听滚动条的滚动事件
- $(window).scroll(function(){
- MoveWindow();
- });
- });
- var timeoutid;
- function MoveWindow(){
- clearTimeout(timeoutid);
- timeoutid=setTimeout(function(){
- //获取浏览器的宽度
- var bwidth=$(window).width();
- //获取浏览器的高度
- var bheight=$(window).height();
- //获取当前窗口宽度
- var winwidth=$("#center").outerWidth(true);
- //获取当前窗口高度
- var winheight=$("#center").outerHeight(true);
- //获取滚动条的高度
- var sTop=$(window).scrollTop();
- //获取滚动条的宽度
- var sLeft=$(window).scrollLeft();
- //计算窗口距左的距离
- var left1=sLeft+bwidth-winwidth;
- //计算窗口距上的距离
- var top1=sTop+bheight-winheight;
- //设置层的位置,添加动画效果
- $("#center").animate({left:left1,top:top1},300).show("slow");
- },300);
- }
- </script>
- <title>无标题文档</title>
- </head>
- <body>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <br><br><br><br><br><br><br><br><br><br>
- <input type="button" id="btn1" value="打开右下角窗口" />
- <div class="window" id="center">
- <div class="title">
- <img src="../images/close.jpg" />CSDN欢迎您
- </div>
- <div class="content">
- 这里是正文部分 hell CSDN
- </div>
- </div>
- </body>
- </html>
以上效果在搜狗、IE、火狐测试下均没有问题,粗略之处还请大家多多沟通交流。
下载地址: 20110401jQuery.rar (20.47 KB, 下载次数: 123)
[原创地址] [源码下载] [更多原创,多多支持多]