页面内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery窗口效果</title>
<link rel="stylesheet" type="text/css" href="css/window.css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/window.js"></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>
<input type="button" value="左下角显示窗口" id="leftpop">
<input type="button" value="屏幕中间显示窗口" id="centerpop">
<div class="window" id="center">
<div class="title">
<img alt="关闭" src="images/close.gif">
我是中间显示窗口的标题栏
</div>
<div class="content">
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
<p>我是中间显示窗口的内容区</p>
</div>
</div>
<div class="window" id="left">
<div class="title">
<img alt="关闭" src="images/close.gif">
我是左边显示窗口的标题栏
</div>
<div class="content">
我是左边显示窗口的内容区
</div>
</div>
<div class="window" id="right">
<div class="title">
<img alt="关闭" src="images/close.gif">
我是右边显示窗口的标题栏
</div>
<div class="content">
我是右边显示窗口的内容区
</div>
</div>
</body>
</html>
样式如下：
.window {
background-color:#D0DEF0;
width:250px;
margin: 5px;
/**
* position：检索对象的定位方式。
* absolute：将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。
* 而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
**/
position: absolute;
display: none;
}
.content {
height: 120px;
background-color:white;
border: 2px solid #D0DEF0;
padding: 2px;
/**
* overflow：检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
* visible：不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
* auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
* hidden：不显示超过对象尺寸的内容
* scroll：总是显示滚动条
**/
overflow: auto;
font-size: 14px;
}
.title {
padding: 2px;
padding-left: 4px;
font-size: 14px;
cursor: pointer;
}
.title img {
width: 16px;
height: 15px;
float: right;
}
js内容如下：
$(document).ready(function(){
//$(".title img").click(function(){
// $(this).parent().parent().hide("slow");
//});
var centerWin = $("#center").mywin({left:"center",top:"center"});
var leftWin = $("#left").mywin({left:"left",top:"bottom"},function(){
leftWin.slideUp("slow");
});
$("#centerpop").click(function(){
//计算屏幕正中间的位置
//var browserwidth = $(window).width();
//var browserheight = $(window).height();
//var cwinwidth = $("#center").width();
//var cwinheight = $("#center").height();
//有滚动条的情况
//var scrollLeft = $(window).scrollLeft();
//var scrollTop = $(window).scrollTop();
//var left = scrollLeft + (browserwidth-cwinwidth)/2;
//var top = scrollTop + (browserheight-cwinheight)/2;
//$("#center").css("left",left).css("top",top).show("slow");
centerWin.show("slow");
});
$("#leftpop").click(function(){
leftWin.slideDown("slow");
});
var rightwin = $("#right");
//outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）设置为 true 时，计算边距在内
var cwinwidth = rightwin.outerWidth(true);
var cwinheight = rightwin.outerHeight(true);
var windowObj = $(window);
//scrollLeft()：获取匹配元素相对滚动条左侧的偏移
var scrollLeft = windowObj.scrollLeft();
//scrollTop()：获取匹配元素相对滚动条顶部的偏移。
var scrollTop = windowObj.scrollTop();
var browserwidth = windowObj.width();
var browserheight = windowObj.height();
//fadeOut()：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
rightwin.mywin({left:"right",top:"bottom"},function(){
rightwin.hide();
},{left:scrollLeft+browserwidth-cwinwidth,top:scrollTop+browserheight-cwinheight}).fadeOut(15000).dequeue();
});
//JQuery 插件
/**
*@param position包含两个属性(目标位置)：一个是left,一个是right
*@param hidefunc：表示窗口隐藏的方法
*@param initPos：初始窗口位置
**/
$.fn.mywin = function(position,hidefunc,initPos){
if(position && position instanceof Object){
var positionLeft = position.left;
var positionTop = position.top;
var windowObj = $(window);
var currentwin = this;
//var cwinwidth = currentwin.width();
var cwinwidth = currentwin.outerWidth(true);
//var cwinheight = currentwin.height();
var cwinheight = currentwin.outerHeight(true);
var scrollLeft;
var scrollTop;
var browserwidth;
var browserheight;
var left;
var top;
//得到浏览器对象本身的一些信息
function getBrowserDim(){
scrollLeft = windowObj.scrollLeft();
scrollTop = windowObj.scrollTop();
browserwidth = windowObj.width();
browserheight = windowObj.height();
}
//计算目标对象的left值
function callLeft(positionLeft,scrollLeft,browserwidth,cwinwidth){
if(positionLeft && typeof positionLeft == "string"){
if(positionLeft == "center"){
left = scrollLeft + (browserwidth-cwinwidth)/2;
}else if(positionLeft == "left"){
left = scrollLeft;
}else if(positionLeft == "right"){
left = scrollLeft + browserwidth - cwinwidth;
}else {
left = scrollLeft + (browserwidth-cwinwidth)/2;
}
}else if(typeof positionLeft == "number"){
left = positionLeft;
}else {
left = 0;
}
}
//计算目标对象的top值
function callTop(positionTop,scrollTop,browserheight,cwinheight){
if(positionTop && typeof positionTop == "string"){
if(positionTop == "center"){
top = scrollTop + (browserheight-cwinheight)/2;
}else if(positionTop == "top"){
top = scrollTop;
}else if(positionTop == "bottom"){
top = scrollTop + browserheight - cwinheight;
} else {
top = scrollTop + (browserheight-cwinheight)/2;
}
}else if(typeof positionTop == "number"){
top = positionTop;
}else {
top = 0;
}
}
//设置目标对象到目标位置的变化情况
function getMoveWin(){
callLeft(currentwin.data("positionLeft"),scrollLeft,browserwidth,cwinwidth);
callTop(currentwin.data("positionTop"),scrollTop,browserheight,cwinheight);
//currentwin.css("left",left).css("top",top);
currentwin.animate({
left:left,
top: top
},600);
}
var scrollTimeout;
$(window).scroll(function(){
if(!currentwin.is(":visible")){
return;
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function(){
getBrowserDim();
getMoveWin();
},300);
});
$(window).resize(function(){
if(!currentwin.is(":visible")){
return;
}
getBrowserDim();
getMoveWin();
});
//注册窗体的关闭图标的点击事件
currentwin.children(".title").children("img").click(function(){
if(hidefunc){
hidefunc();
}else{
currentwin.hide("slow");
}
});
if(initPos && initPos instanceof Object){
var initLeft = initPos.left;
var initTop = initPos.top;
if(initLeft && typeof initLeft == "number"){
currentwin.css("left",initLeft);
}else{
currentwin.css("left",0);
}
if(initTop && typeof initTop == "number"){
currentwin.css("top",initLeft);
}else{
currentwin.css("top",0);
}
currentwin.show();
}
currentwin.data("positionLeft",positionLeft);
currentwin.data("positionTop",positionTop);
getBrowserDim();
getMoveWin();
//callLeft(positionLeft,scrollLeft,browserwidth,cwinwidth);
//callTop(positionTop,scrollTop,browserheight,cwinheight);
//currentwin.css("left",left).css("top",top);
}
//返回当前对象
return this;
}
分享到：
相关推荐
这些知识点涵盖了jQuery的基本操作、动画效果、选择器、事件处理、插件使用以及在移动开发中的应用，是jQuery开发的基础。理解并熟练运用这些概念，可以帮助开发者高效地构建动态、响应式的网页应用。
在IT领域，前端开发是构建Web应用程序的重要组成部分，而jQuery作为一个强大的JavaScript库，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本话题聚焦于一个基于jQuery实现的流程图在线编辑插件，该插件为...
- **插件系统**：jQuery的插件系统允许开发者创建自定义的jQuery插件，这些插件可以扩展jQuery的核心功能，满足特定的应用需求。 ### 浅析jQuery框架与构造对象 jQuery框架的核心是`$`符号，这是一个全局函数，用于...
在实际应用中，jQuery可以用来创建响应式布局，通过监听窗口大小变化（$(window).resize(function() {...})）来调整页面元素的布局。同时，它可以处理AJAX请求，例如$.ajax()函数用于异步加载数据，提升用户体验。$....
8. **响应式设计**：jQuery可以辅助实现响应式布局，通过检测窗口大小变化（`.resize()`）来调整元素样式或布局。 9. **遍历和过滤**：`.each()`, `.not()`, `.first()`, `.last()`, `.filter()`, `.find()`等方法...
在`js`文件中，可以看到类似`$(window).scroll(function() {...})`这样的代码段，这是jQuery监听窗口滚动事件的标准写法。 然后，为了实现点击图标返回顶部的效果，我们需要在jQuery中添加一个点击事件监听器，例如...
效果不错的js写法，需要jquery-1.11.0.min.js插件，窗口可以调整大小。
滚动插件特效是一种常见的网页交互设计，主要用于提升用户体验，它基于JavaScript库jQuery实现。jQuery是一个高效、简洁且功能丰富的JavaScript工具包，使得开发者能够轻松处理DOM操作、事件处理、动画效果以及Ajax...
然而，当我们在Web项目中引入jQuery插件时，可能会遇到一些报错的情况，即使项目仍然能够正常运行。这通常与开发环境的配置有关。下面我们将详细探讨这个问题以及如何解决。 首先，错误的出现可能源于IDE（集成开发...
对于IE8及以下版本，可能需要使用JavaScript库如jQuery的`.corner()`插件或CSS3PIE这样的工具来模拟圆角效果。 3. **div元素**： 在HTML中，`<div>`是一个非常常用的布局容器，可以容纳其他HTML元素，并通过CSS...
"JQ 弹窗"是指使用jQuery实现的对话框或提示窗口功能，它是网页交互中常见的一种设计，用于显示通知、警告、确认信息或者用户输入等内容。 在描述中提到的"所有JQ的提示框都有"，这可能意味着这个压缩包包含了一...
5. **初始化Tab插件**：最后，需要在文档加载完成后，通过jQuery调用Bootstrap的Tab插件，激活第一个Tab。 ```javascript $(document).ready(function () { $('#myTab').tab('show'); }); ``` 以上就是一个简单...
在实际开发中，淡入淡出效果的应用不仅仅局限于图片，还可以应用于各种HTML元素，比如模态窗口、信息提示框等。通过纯JavaScript实现，可以帮助开发者更好地理解浏览器渲染和DOM操作的原理，同时也可以提高页面的...
在网页开发中，layer弹窗组件是非常常用的JavaScript库，用于实现各种弹出窗口的效果。在某些场景下，我们可能希望当用户在layer弹窗中按下回车键时，能够触发某些行为，比如表单提交等。但有时候可能会出现按回车键...