1 $(document).ready(function(){
2 //1.点击按钮可以在屏幕中间显示一个窗口
3 //2.点击按钮2可以在屏幕的左下角显示一个窗口
4 //3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出
5
6 /*
7 *$(".title img").click(function(){
8 * //关闭按钮点击之后，关闭窗口
9 * $(this).parent().parent().hide("slow");
10 *});
11 */
12 var centerwin = $("#center");
13 var leftwin = $("#left");
14 var rightwin = $("#right");
15 $("#centerpop").click(function(){
16 //鼠标点击按钮之后，把id为center的窗口显示在页面中间
17 //计算位于屏幕中间的窗口的左边界和上边界的值
18 //浏览器可视区域的宽和高，当前窗口的宽和高
19 //需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
20 centerwin.show("slow");
21 });
22 $("#leftpop").click(function() {
23 leftwin.slideDown("slow");
24 });
25
26 //for scroll change
27 setTimeout(function () {
28 centerwin.mywin({left: "center", top: "center"});
29 leftwin.mywin({left: "left", top: "bottom"}, function(){
30 leftwin.slideUp("slow");
31 });
32 //for rightWin in diffrient browser
33 var windowobj = $(window);
34 var cwinwidth = rightwin.outerWidth(true);
35 var cwinheight = rightwin.outerHeight(true);
36 var browserwidth = windowobj.width();
37 var browserheight = windowobj.height();
38 var scrollLeft = windowobj.scrollLeft();
39 var scrollTop = windowobj.scrollTop();
40 var rleft = scrollLeft + browserwidth - cwinwidth;
41 if ($.browser.safari) {
42 rleft = rleft - 15;
43 }
44 if ($.browser.opera) {
45 rleft = rleft + 15;
46 }
47 if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
48 rleft = rleft - 20;
49 }
50 //init rightWin then fadeout after 15s
51 rightwin.mywin({left: "right", top: "bottom"}, function() {
52 rightwin.hide();
53 },{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
54 },500);
55
56 });
57
58 /*
59 *$.fn.hello = function() {
60 * alert("hello:" + this.val());
61 * return this;
62 *}
63 */
64
65 /**
66 *@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top
67 *@param hidefunc表示执行窗口隐藏的方法
68 *@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top
69 */
70 $.fn.mywin = function(position, hidefunc, initPos) {
71 if (position && position instanceof Object) {
72 var positionleft = position.left;
73 var positiontop = position.top;
74
75 var left;
76 var top;
77 var windowobj = $(window);
78 var currentwin = this;
79 var cwinwidth;
80 var cwinheight;
81
82 var browserwidth;
83 var browserheight;
84 var scrollLeft;
85 var scrollTop;
86 //计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值
87 function getBrowserDim() {
88 browserwidth = windowobj.width();
89 browserheight = windowobj.height();
90 scrollLeft = windowobj.scrollLeft();
91 scrollTop = windowobj.scrollTop();
92 }
93 //计算窗口真实的左边界值
94 function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {
95 if (positionleft && typeof positionleft == "string") {
96 if (positionleft == "center") {
97 left = scrollLeft + (browserwidth - cwinwidth) / 2;
98 } else if (positionleft == "left") {
99 left = scrollLeft;
100 } else if (positionleft == "right") {
101 left = scrollLeft + browserwidth - cwinwidth;
102 if ($.browser.safari) {
103 left = left - 15;
104 }
105 if ($.browser.opera) {
106 left = left + 15;
107 }
108 if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
109 left = left - 20;
110 }
111 } else {
112 left = scrollLeft + (browserwidth - cwinwidth) / 2;
113 }
114 } else if (positionleft && typeof positionleft == "number") {
115 left = positionleft;
116 } else {
117 left = 0;
118 }
119 }
120 //计算窗口真实的上边界值
121 function calTop(positiontop, scrollTop, browserheight, cwinheight) {
122 if (positiontop && typeof positiontop == "string") {
123 if (positiontop == "center") {
124 top = scrollTop + (browserheight - cwinheight) / 2;
125 } else if (positiontop == "top") {
126 top = scrollTop;
127 } else if (positiontop == "bottom") {
128 top = scrollTop + browserheight - cwinheight;
129 if ($.browser.opera) {
130 top = top - 25;
131 }
132 } else {
133 top = scrollTop + (browserheight - cwinheight) / 2;
134 }
135 } else if (positiontop && typeof positiontop == "number") {
136 top = positiontop;
137 } else {
138 top = 0;
139 }
140 }
141 //移动窗口的位置
142 function moveWin() {
143 calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
144 calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
145 currentwin.animate({
146 left: left,
147 top: top
148 },600);
149 }
150
151 //定义关闭按钮的动作
152 currentwin.children(".title").children("img").click(function() {
153 if (!hidefunc) {
154 currentwin.hide("slow") ;
155 } else {
156 hidefunc();
157 }
158 });
159
160 if (initPos && initPos instanceof Object) {
161 var initLeft = initPos.left;
162 var initTop = initPos.top;
163 if (initLeft && typeof initLeft == "number") {
164 currentwin.css("left", initLeft);
165 } else {
166 currentwin.css("left", 0);
167 }
168 if (initTop && typeof initTop == "number") {
169 currentwin.css("top", initTop);
170 } else {
171 currentwin.css("top", 0);
172 }
173 currentwin.show();
174 }
175 cwinwidth = currentwin.outerWidth(true);
176 cwinheight = currentwin.outerHeight(true);
177 currentwin.data("positionleft", positionleft);
178 currentwin.data("positiontop", positiontop);
179 getBrowserDim();
180 moveWin();
181
182 var scrollTimeout;
183 //浏览器滚动条滚动时，移动窗口的位置
184 $(window).scroll(function(){
185 //判断一下当前窗口是否可见
186 if (!currentwin.is(":visible")) {
187 return;
188 }
189 clearTimeout(scrollTimeout);
190 scrollTimeout = setTimeout(function(){
191 getBrowserDim();
192 moveWin();
193 },300);
194 });
195 //浏览器大小改变时，移动窗口的位置
196 $(window).resize(function(){
197 //判断一下当前窗口是否可见
198 if (!currentwin.is(":visible")) {
199 return;
200 }
201 getBrowserDim();
202 moveWin();
203 });
204 //返回当前对象，以便可以级联的执行其他方法
205 return currentwin;
206 }
207 }
