jquery基础

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #function #class #button #div

本文介绍了一种使用JavaScript和jQuery实现的居中及不同位置弹窗效果的方法。通过计算浏览器窗口尺寸和滚动距离，使得弹出窗口能够准确地显示在页面的不同位置，包括居中、左下角、右下角、左上角和右上角。

1、

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p{

display:none;

   }

</style>
<script language="javascript" type="text/javascript" src="../js/jquery.js">
</script>
<script language="javascript" type="text/javascript" src="window-center.js">
</script>
<script language="javascript" type="text/javascript" src="window-left.js">
</script>
<script language="javascript" type="text/javascript" src="window-right.js">
</script>
<script language="javascript" type="text/javascript" src="window-left-top.js">
</script>
<script language="javascript" type="text/javascript" src="window-right-top.js">
</script>

<link type="text/css" rel="stylesheet" href="window-center.css">
<script language="javascript" type="text/javascript">
$(document).ready(function(){
   var windowHeight=$(window).height();
   var windowWidth=$(window).width();
   var documentHeight=$(document).height();
   var documentWidth=$(document).width();

   //利用toggle方法显示和隐藏

   $("#btn_center").click(function(){

          if(windowHeight<documentHeight){
            $(window).scroll(function(){
               popCenterWindow();
             });
       }else{
           popCenterWindow();
       }

   });
   $("#btn_left").click(function (){
       initLeft();
       popCenterWindowLeft();

       });
   $("#btn_right").click(function (){
       initRight();
       popCenterWindowRight();

       });
   $("#btn_left-top").click(function (){
       initLefttop();
       popCenterWindowLefttop();

       });
   $("#btn_right-top").click(function (){
       initRighttop();
       popCenterWindowRighttop();

       });
   });

</script>

</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 />

<input type="button" id="btn_center" value="弹出居中窗口">
<input type="button" id="btn_left" value="弹出居左下角窗口">
<input type="button" id="btn_right" value="弹出居右下角窗口">
<input type="button" id="btn_left-top" value="弹出居左上角窗口">
<input type="button" id="btn_right-top" value="弹出居右上角窗口">
<div class="window" id="center">

<div class="title"><img src="1.gif">优快云欢迎你-居中窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="right">

<div class="title"><img src="1.gif">优快云欢迎你-居左窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="left">

<div class="title"><img src="1.gif">优快云欢迎你-居右窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="right-top">

<div class="title"><img src="1.gif">优快云欢迎你-居右上窗口</div>
<div class="content">3gput.com你好</div>

</div>
<div class="window" id="left-top">

<div class="title"><img src="1.gif">优快云欢迎你-居左上窗口</div>
<div class="content">3gput.com你好</div>

</div>
</body>
</html>

2、window-center.js

//定义一些量变

//获得窗口的高度
var windowHeight;
//获得窗口的宽度
var windowWidth;

//获得弹窗的高度
var popHeight;
//获得弹窗的宽度
var popWidth;

//获取滚动条滚动的宽度
var scrollTop;
//获取滚动条滚动的宽度
var scrollLeft;

//延迟时间
var time;

function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();

popHeight=$(".window").height();
popWidth=$(".window").width();

scrollTop=$(window).scrollTop();
scrollLeft=$(window).scrollLeft();
}

//关闭窗口


function closeWindow(){
//找到X的图片，家单击事件，并且关闭窗口
$(".title img").click(function(){

       $(this).parent().parent().hide("slow");
});
}

//定义弹出注重窗口的方法

function popCenterWindow(){
clearTimeout(time);
   time=setTimeout(function(){
   init();
   //计算弹出窗口的左上角Y的偏移量
   var popY=(windowHeight-popHeight)/2+scrollTop;
   var popX=(windowWidth-popWidth)/2+scrollLeft;

    //关闭窗口
      closeWindow();

//设定窗口的位置
//$("#center").css("top",popY).css("left",popX).show("slow");

$("#center").animate({top:popY,left:popX},500).show();

},80);
}