您的位置：首页 > Web前端 > JQuery

Jquery制作窗口弹出效果（转）

2011-04-08 09:04 489 查看

今天给大家带来的是，实用jQuery技术实现各种弹窗效果，比如弹出指定位置的窗口（左下角、右下角、居中...）等，尤其是弹出右下角窗口特别实用，如果能够跟随滚动条一起滚动，那就非常good了！一些企业网站也会经常采用这种方式重点宣传自己的产品。

   先看下效果图：

   弹出居中窗口效果

5 小时前上传
下载附件 (44.73 KB)

   弹出左下角窗口效果

   弹出右下角窗口效果

5 小时前上传
下载附件 (11.55 KB)

   如上图，要实现弹出指定位置的窗口其实也并不难，主要就是要计算出要弹出窗口的左上角坐标，那到底怎样计算出各种位置窗口的左上角坐标我们做如下分析：

   弹出居中窗口：

   如图求出窗口的左上角坐标，计算方式如图

       注意黑色部分是滚动条区域，当出现滚动条时 x和y分别还要加上滚动条滚动的宽度和滚动条滚动的高度

   弹出左下角窗口分析图如下：

接上文，[原创+源码]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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function stylesheet class xhtml 浏览器

相关文章推荐

新的分享

章节导航