JQuery实战---窗口效果

在前面的相关博文中，小编对jquery的相关知识进行了简单的总结，关于jquery的很多小的知识点，都需要我们自己去动手和实践，一行行代码都需要我们自己亲自动手去敲，今天我们继续来学习jquery的相关小例子，今天我们这个小例子是关于窗口的弹出效果，相关源码，小编已经上传，有需要的小伙伴可以点击进行下载哦，希望可以帮助到有需要的小伙伴哦，接着，我们就开始小例子的学习，首先，我们来看一下最终的效果图，如下所示：

这个窗口效果的小例子，既不会被拦窗而且更加的灵活，接着，我们来看一下这个小例子的整体目录的布局，如下图所示：

接下来，我们开始来编写我们的程序代码，一步一步编写实例，首先第一步，建立html文件，代码编写如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战-窗口效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/window.css" />
		<script type="text/javascript" src="js/jquery.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 />
		<input type="button" value="左下角显示窗口" id="leftpop" />
		<input type="button" value="屏幕中间显示窗口" id="centerpop" />
		<div class="window" id="center">
			<div class="title">
				<img alt="关闭" src="data:images/close.gif" />
				我是中间显示窗口的标题栏
			</div>
			<div class="content">
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<p>我是中间显示窗口的内容区</p>
				<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="data:images/close.gif" />
				我是左边显示窗口的标题栏
			</div>
			<div class="content">
				我是左边显示窗口的内容区
			</div>
		</div>
		<div class="window" id="right">
			<div class="title">
				<img alt="关闭" src="data:images/close.gif" />
				我是右边显示窗口的标题栏
			</div>
			<div class="content">
				我是右边显示窗口的内容区
			</div>
		</div>
	</body>
</html>

我们来分析一下上面的代码，页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示，让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口设置一定的padding值，已达到内容区域和标题栏以后窗口外边的对比，从而看起来是一个窗口的效果。到此html就可以功成身退了，因为页面上只有这些内容，至于如何展现一个标签页的效果，是css的工作，接着，我们来编写css的代码，如下所示:

.window {
    background-color: #D0DEF0;
    width: 250px;
    /*padding: 2px;*/
    margin: 5px;
	/*控制窗口绝对定位*/
    position: absolute;
    display: none;
}
.content {
    height: 150px;
    background-color: white;
    border: 2px solid #D0DEF0;
    padding: 2px;
	/*控制区域内容超过指定高度和宽度时显示滚动条*/
    overflow: auto;
}
.title {
    padding: 4px;
    font-size: 14px;
}
.title img {
    width: 14px;
    height: 14px;
    float: right;
    cursor: pointer;
}

我们来看一下float，实际上会影响到后面的一个元素和float的元素之间的显示效果，因此这个例子中如果html代码中img位于标题栏的最后时，float：right导致图片跑到了内容区域的最右边，只有在html里面讲img放到标题栏文字的前面，这个时候float：right才会使图片刚好位于标题栏的最右边。相应的，在js中我们也要建立两个文件，一个jquery一个window，鉴于jquery的代码较多，所以小编已经上传相关资源，有需要的小伙伴可以到该链接下载，接着，我们来编写tab的代码，来给整理页面添加行为能力，代码如下所示：

$(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;
	}
}

至此呢，我们窗口效果的这个小实例代码就已经编写完毕了，我们来看一下我们的运行效果如下图所示：

小编寄语：至此jquery的小例子到此就要和小伙伴们说再见了，还是博文开篇的那句话，所有的实战小例子都需要我们自己亲自动手去敲，一行一行的代码需要在实践的过程中慢慢领悟，来公司实习快三周的时间了，深刻认识到写文档和画图的重要性，客户是挑剔的，一个标点符号的使用，字体的使用使用，语言语义的表达能力，所有的一起小编都需要在实习过程中慢慢的提高，最后，祝各位小伙伴端午节快乐`(*∩_∩*)′！

JQuery实战---窗口效果的更多相关文章

JQuery实战总结二横向纵向菜单下拉效果图
记得以前在浏览了大多数网站的上面发现很多下拉的导航栏,觉得特别好玩,毕竟咱们是学习编程的嘛,对这下拉的效果还是挺感兴趣的,这种淡入淡出,随着鼠标移动的位置不同.有无等而出现不同的效果,给用户以神美感. ...
jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
jquery实战第一讲---概述及其入门实例
就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...
JQuery实战---初识JQuery+入门实例
JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...
jQuery实现放大镜效果
1.1.1 摘要相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图代码: <!DOCTYPE html> <html> <head lang="en&qu ...

随机推荐

bzoj2655calc 容斥+dp
2655: calc Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 322 Solved: 197[Submit][Status][Discuss] ...
DELL、HP、IBM X86服务器命名规则
DELL.HP.IBM X86服务器命名规则各大服务器厂家对于自己的服务器命名都有一定的规则,通常会根据服务器的外观(如塔式.机架式.刀片等).处理器(如Intel或者AMD等).架构等信息来命名. ...
SQL AND和OR求值顺序
假如需要列出价格为10美元及以上,且由DLL01或BRS01制造的所有产品.下面的SELECT语句使用组合的AND和OR操作符建立了一个WHERE子句: ; 分析▼ 请看上面的结果.返回的行中有4行价 ...
jquery easyui datagrid设置行样式不可删除某行
rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSu ...
2018春招实习笔试面试总结（PHP）
博主双非渣本计算机软件大三狗一枚,眼看着春招就要结束了,现将自己所经历的的整个春招做一个个人总结. 首先就是关于投递计划,博主自己整理了一份各大公司的春招信息,包括网申地址,开始时间,结束时间,以及自 ...
[原创]基于VueJs的前后端分离框架搭建之完全攻略
首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...
Linux下安装oracle的一般步骤
1.配置内核参数2.创建用户和用户组3.创建安装目录4.配置oracle用户环境5.安装数据库软件6.创建数据库7.配置监听
UCSC下载ENCODE数据
ENCODE数据库用于存放基因组原件,所有的测序数据(原始数据以及每一步处理后的数据以及最终的结果)都是开放下载的.假如说去官网下载的话会比较麻烦,这里可以通过UCSC的数据库下载(真的是神器啊)!下 ...
Java经典设计模式之五大创建型模式（附实例和详解）
一.概况总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥 ...
计算机网络之万维网WWW
万维网 WWW (World Wide Web)并非某种特殊的计算机网络,而是一个大规模的.联机式的信息储藏所. 万维网用链接的方法能非常方便地从因特网上的一个站点访问另一个站点,从而主动地按需获取丰 ...

JQuery实战---窗口效果

JQuery实战---窗口效果的更多相关文章

随机推荐

热门专题