在网页上，我们经常会看到很多的小窗体时隐时现的，感觉到很漂亮，不知道是怎么出现的，当我们用javascript的话，将要写很多的代码，如果用jquery，则用很少的代码，就可以实现了，下面是一个浮动窗体的案例，分别在中间，右下角，左下角出现不同的效果：
html页面：
<body>
<input type="button" value="左下角显示窗口"id="leftpop"/>
<input type="button" value="在中间显示窗口"id="centerpop"/>
<div class="window" id="center">
<div class="title">
<img src="images/close.gif" alt="关闭">
我是中间显示窗口的标题栏
</div>
<div class="content">
<p>我是中间显示的内容请</p>
<p>我是中间显示的内容请</p>
<p>我是中间显示的内容请</p>
<p>我是中间显示的内容请</p>
<p>我是中间显示的内容请</p>
<p>我是中间显示的内容请</p>
</div>
</div>
<div class="window" id="left">
<div class="title">
<img src="images/close.gif" alt="关闭">
我是左边的显示窗口的标题栏
</div>
<div class="content">
我是中间显示的内容请
</div>
</div>
<div class="window" id="right">
<div class="title">
<img src="images/close.gif" alt="关闭">
我是右边的显示窗口的标题栏
</div>
<div class="content">
我是中间显示的内容请
</div>
</div>
jQuery页面的代码：
$(document).ready(function(){
//1.点击按钮可以在屏幕中间显示一个窗口
//2.点击按钮2可以在屏幕的左下角显示一个窗口
//3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出
/*
*$(".title img").click(function(){
* //关闭按钮点击之后，关闭窗口
* $(this).parent().parent().hide("slow");
*});
*/
var centerwin = $("#center");
var leftwin = $("#left");
var rightwin = $("#right");
$("#centerpop").click(function(){
//鼠标点击按钮之后，把id为center的窗口显示在页面中间
//计算位于屏幕中间的窗口的左边界和上边界的值
//浏览器可视区域的宽和高，当前窗口的宽和高
//需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
centerwin.show("slow");
});
$("#leftpop").click(function() {
leftwin.slideDown("slow");
});
setTimeout(function () {
centerwin.mywin({left: "center", top: "center"});
leftwin.mywin({left: "left", top: "bottom"}, function(){
leftwin.slideUp("slow");
});
var windowobj = $(window);
var cwinwidth = rightwin.outerWidth(true);
var cwinheight = rightwin.outerHeight(true);
var browserwidth = windowobj.width();
var browserheight = windowobj.height();
var scrollLeft = windowobj.scrollLeft();
var scrollTop = windowobj.scrollTop();
var rleft = scrollLeft + browserwidth - cwinwidth;
if ($.browser.safari) {
rleft = rleft - 15;
}
if ($.browser.opera) {
rleft = rleft + 15;
}
if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
rleft = rleft - 20;
}
rightwin.mywin({left: "right", top: "bottom"}, function() {
rightwin.hide();
},{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
},500);
});
/*
*$.fn.hello = function() {
* alert("hello:" + this.val());
* return this;
*}
*/
/**
*@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top
*@param hidefunc表示执行窗口隐藏的方法
*@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top
*/
$.fn.mywin = function(position, hidefunc, initPos) {
if (position && position instanceof Object) {
var positionleft = position.left;
var positiontop = position.top;
var left;
var top;
var windowobj = $(window);
var currentwin = this;
var cwinwidth;
var cwinheight;
var browserwidth;
var browserheight;
var scrollLeft;
var scrollTop;
//计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值
function getBrowserDim() {
browserwidth = windowobj.width();
browserheight = windowobj.height();
scrollLeft = windowobj.scrollLeft();
scrollTop = windowobj.scrollTop();
}
//计算窗口真实的左边界值
function calLeft(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;
if ($.browser.safari) {
left = left - 15;
}
if ($.browser.opera) {
left = left + 15;
}
if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
left = left - 20;
}
} else {
left = scrollLeft + (browserwidth - cwinwidth) / 2;
}
} else if (positionleft && typeof positionleft == "number") {
left = positionleft;
} else {
left = 0;
}
}
//计算窗口真实的上边界值
function calTop(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;
if ($.browser.opera) {
top = top - 25;
}
} else {
top = scrollTop + (browserheight - cwinheight) / 2;
}
} else if (positiontop && typeof positiontop == "number") {
top = positiontop;
} else {
top = 0;
}
}
//移动窗口的位置
function moveWin() {
calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
currentwin.animate({
left: left,
top: top
},600);
}
//定义关闭按钮的动作
currentwin.children(".title").children("img").click(function() {
if (!hidefunc) {
currentwin.hide("slow") ;
} else {
hidefunc();
}
});
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", initTop);
} else {
currentwin.css("top", 0);
}
currentwin.show();
}
cwinwidth = currentwin.outerWidth(true);
cwinheight = currentwin.outerHeight(true);
currentwin.data("positionleft", positionleft);
currentwin.data("positiontop", positiontop);
getBrowserDim();
moveWin();
var scrollTimeout;
//浏览器滚动条滚动时，移动窗口的位置
$(window).scroll(function(){
//判断一下当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function(){
getBrowserDim();
moveWin();
},300);
});
//浏览器大小改变时，移动窗口的位置
$(window).resize(function(){
//判断一下当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
getBrowserDim();
moveWin();
});
//返回当前对象，以便可以级联的执行其他方法
return currentwin;
}
}
css处理：
.window{
background-color:#d0def0;
width:250px;
margin:5px;
position:absolute;
display:none;
}
.content{
height:150px;
background-color:white;
border:2px solid #d0def0;
padding:2px;
/*这个是出现滚动条*/
overflow:auto;
}
.title{
padding:2px;
font-size:14px;
}
.title img{
width:14px;
height:14px;
float:right;
/*鼠标点上去后有手型*/
cursor:pointer;
}
分享到：
相关推荐
在IT领域，浮动窗口是一种常见的用户界面元素，它可以在屏幕上的任意位置自由移动，并且能够保持在其他窗口之上显示。这种设计通常用于提供快速访问的信息或者功能，例如通知、快捷操作面板等。在Windows系统中，MFC...
客服QQ浮动窗口是一种常见的网页交互设计，用于提供即时在线客服支持。这种设计通常结合JavaScript和CSS技术实现，以便在用户浏览网页时，一个带有QQ客服号码的小窗口会悬浮在页面的一角，方便用户随时发起咨询。 ...
在本文中，我们将深入探讨如何使用Visual C++（简称VC）来编写一个具有浮动窗口功能的程序，这个程序模仿了类似迅雷、FlashGet等流行软件的特性。浮动窗口是一种能够在用户界面中自由移动并独立于主窗口显示特定信息...
首先，我们来理解浮动窗口的基本概念。在HTML中，浮动窗口通常不是通过HTML本身直接实现的，而是借助CSS的定位属性，如`position`（位置）、`top`、`right`、`bottom`和`left`。通过设置这些属性，我们可以使一个...
在Android开发中，360浮动窗口是一种常见的应用交互设计，它允许用户在主屏幕上进行悬浮操作，提高用户的使用效率和体验。360浮动窗口通常用于即时通讯、音乐播放、视频监控等场景，使用户可以同时处理多个任务。...
QQ在线浮动窗口插件是一种常见的网站交互功能，它允许访客在浏览网页时直观地看到网站管理员或客服人员的在线状态，便于及时沟通。在ASP（Active Server Pages）技术平台上实现这一功能，可以让网站具备更高效的用户...
在网页设计中，浮动窗口是一种常见的交互元素，它可以在用户滚动页面时始终保持在视口的可见位置，提供持续的信息展示或者导航功能。本教程将详细讲解如何使用JavaScript实现基于页面的浮动窗口。JavaScript作为一种...
在Android开发中，浮动窗口按钮截图是一种常见的功能，它允许用户在屏幕上自由移动一个按钮，点击该按钮即可快速截图。这种技术涉及到多个Android系统组件和技术，包括浮动窗口、服务和服务的生命周期管理、权限控制...
在Windows编程中，浮动窗口是一种可以自由移动并悬浮在应用程序主窗口上方的窗口。这种窗口通常用于工具栏、状态栏或者自定义控件，让用户在需要时方便地访问。本教程将详细介绍如何通过继承`CControlBar`类来实现一...
在Android开发中，浮动窗口（通常称为悬浮窗或者系统级通知）是一种可以在用户界面上自由移动的小型窗口，常用于实现如聊天头像、音乐播放控制器等应用功能。本项目"可自动移动和手动移动的浮动窗口"提供了一个完整...
在Android系统中，浮动窗口（Float Window）是一种特殊类型的窗口，它可以在用户界面的顶层显示，允许用户在不离开当前应用的情况下访问或操作其他内容。这种技术常用于各种辅助工具或者快捷方式应用，例如，模拟...
在Android开发中，实现浮动窗口动画显示涉及到多个关键知识点，包括自定义视图、窗口权限、动画处理以及触摸事件响应。下面将详细讲解这些概念及其应用。 首先，我们需要理解Android中的浮动窗口，通常称为“悬浮窗...
**jQuery插件：浮动窗口（DIV）** 在网页设计中，浮动窗口（通常是一个具有特定功能的`div`元素）是一种常见的交互元素，它能够悬浮在页面内容之上，提供信息提示、广告展示或者用户交互等功能。jQuery作为一种强大...
【QQ在线客服浮动窗口】是一种常见于网站或应用中的交互设计，它允许用户在使用其他功能的同时方便地与客服人员进行沟通。QQ作为中国最流行的即时通讯工具之一，其在线客服系统被广泛应用于各类企业网站，为用户提供...
在Android开发中，浮动窗口（通常称为悬浮窗或者小部件）是一种常见的功能，它可以在主屏幕或其他应用之上显示内容，为用户提供便捷的操作或信息展示。本教程将详细讲解如何利用`WindowManager`来创建一个浮动窗口，...
在IT领域，尤其是在Windows应用程序开发中，"浮动窗口"和"窗口停靠"是常见的功能设计，主要用于提高用户的交互体验和工作效率。这个名为"浮动窗口源代码.zip"的压缩包文件，显然包含了实现这一功能的源代码。我们将...
《Visual Studio风格浮动窗口开发详解》 在编程领域，开发者们常常追求高效、直观的开发环境，而Visual Studio作为一款强大的集成开发环境（IDE），其界面设计和功能布局深受程序员喜爱。Mr. Oliver Smith开发的...
在Android开发中，浮动窗口（Floating Window）通常被称为悬浮窗，是一种可以在用户界面顶层显示的小型窗口，可以独立于其他应用程序界面存在。本教程将基于提供的"Android浮动窗口demo"来详细讲解如何实现这一功能...
本项目“jQuery可拖动右下角浮动窗口特效”就是基于jQuery实现的一种用户界面交互功能，旨在提供一个可自由移动且能自适应浏览器窗口大小的浮动窗口。这种效果常见于弹出提示框、广告浮窗或设置面板，能够提升用户的...