html5 模仿苹果桌面,JavaScript模仿桌面窗口
这个大概花了YQ一天多时间(虽然含杂大量酱油时间),第一次做,惊现各种debug。网上说的果然没错——debug的时间比写程序的时间多……明显是因为自己没有在敲代码之前做好准备,忽略了很多细节,引以为戒。废话少说,以下是这次自学的笔记:?( ̄? ̄)?
添加了双击缩小放大窗口 & 改变窗口大小的预览效果
[博客文章网址,可运行代码查看效果] == > ver = function() {
201
if(bMousedowning) return false;
202
changeCursor(true, this.index);
203
};
204
boxSide[i].onmouseout = function() {
205
if(bMousedowning) return false;
206
changeCursor(false, this.index);
207
};
208
boxSide[i].onmousedown = function(event) {
209
var event = event || window.event;
210
var index = this.index;
211
var aBoxPrevious = new Array(); //记录box上一次的状态
212
aBoxPrevious["clientX"] = event.clientX;
213
aBoxPrevious["clientY"] = event.clientY;
214
aBoxPrevious["left"] = box.offsetLeft;
215
aBoxPrevious["top"]= box.offsetTop;
216
aBoxPrevious["width"] = box.offsetWidth;
217
aBoxPrevious["height"] = box.offsetHeight;
218
bMousedowning = true;
219
bSizeChanging = true;
220
showVirtualBox(virtualBox, aBoxPrevious);
221
document.onmousemove = function(event) {
222
if(!bSizeChanging) return false;
223
changeVirtualBoxSize(event, aBoxPrevious, index);
224
};
225
document.onmouseup = function() {
226
changeBoxSize(virtualBox)
227
hideVirtualBox(virtualBox);
228
bSizeChanging = false;
229
bMousedowning = false;
230
changeCursor(false, index);
231
};
232
return false;
233
};
234
}
235
//改变鼠标指针样式
236
var changeCursor = function(bIsShowing, index) {
237
if(bIsShowing) {
238
var cursorStyle = ["n-resize","e-resize","s-resize","w-resize","ne-resize","se-resize","sw-resize","nw-resize"];
239
document.body.style.cursor = cursorStyle[index];
240
}
241
else {
242
document.body.style.cursor = "";
243
}
244
};
245
//显示预览DIV
246
var showVirtualBox = function(virtualBox, aBoxPrevious) {
247
with(virtualBox.style) {
248
display = "block";
249
top = aBoxPrevious["top"] + "px";
250
left = aBoxPrevious["left"] + "px";
251
width = aBoxPrevious["width"] + "px";
252
height = aBoxPrevious["height"] + "px";
253
}
254
}
255
//隐藏预览DIV
256
var hideVirtualBox = function(virtualBox) {
257
virtualBox.style.display = "none";
258
}
259
//改变box大小
260
var changeVirtualBoxSize = function(event, aBoxPrevious, index) {
261
var event = event || window.event;
262
var bTop = bRight = bBottom = bLeft = false;
263
//八个方向,分别为N、E、S、W、NE、SW、SW、NW
264
switch (index) {
265
case 0:
266
bTop = true;
267
break;
268
case 1:
269
bRight = true;
270
break;
271
case 2:
272
bBottom = true;
273
break;
274
case 3:
275
bLeft = true;
276
break;
277
case 4:
278
bTop = bRight = true;;
279
break;
280
case 5:
281
bRight = bBottom = true;
282
break;
283
case 6:
284
bBottom = bLeft = true;
285
break;
286
case 7:
287
bLeft = bTop = true;
288
break;
289
default:
290
break;
291
}
292
//向北改变高度
293
if(bTop) {
294
var newTopHeight = aBoxPrevious["height"] - (event.clientY - aBoxPrevious["clientY"]);
295
(newTopHeight < originalHeight) && (newTopHeight = originalHeight);
296
(newTopHeight > aBoxPrevious["top"] + aBoxPrevious["height"]) && (newTopHeight = aBoxPrevious["top"] + aBoxPrevious["height"]);
297
var newTop = aBoxPrevious["top"] + (event.clientY - aBoxPrevious["clientY"]);
298
(newTop > aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight) && (newTop = aBoxPrevious["top"] + aBoxPrevious["height"] - originalHeight);
299
(newTop < 0) && (newTop = 0);
300
virtualBox.style.top = newTop + "px";
301
virtualBox.style.height = newTopHeight - box.clientTop * 2 + "px"; //不能忽略border-width
302
bTop = false;
303
}
304
//向东改变宽度
305
if(bRight) {
306
var newRightWidth = aBoxPrevious["width"] + (event.clientX - aBoxPrevious["clientX"]);
307
(newRightWidth < originalWidth) && (newRightWidth = originalWidth);
308
(newRightWidth > document.body.scrollWidth - aBoxPrevious["left"]) && (newRightWidth = document.body.scrollWidth - aBoxPrevious["left"]);
309
virtualBox.style.width = newRightWidth - box.clientTop * 2 + "px";
310
bRight = false;
311
}
312
//向南改变高度
313
if(bBottom) {
314
var newBottomHeight = aBoxPrevious["height"] + (event.clientY - aBoxPrevious["clientY"]);
315
(newBottomHeight < originalHeight) && (newBottomHeight = originalHeight);
316
(newBottomHeight > document.body.scrollHeight - aBoxPrevious["top"]) && (newBottomHeight = document.body.scrollHeight - aBoxPrevious["top"]);
317
virtualBox.style.height = newBottomHeight - box.clientTop * 2 + "px";
318
bBottom = false;
319
}
320
//向西改变宽度
321
if(bLeft) {
322
var newLeftWidth = aBoxPrevious["width"] - (event.clientX - aBoxPrevious["clientX"]);
323
(newLeftWidth < originalWidth) && (newLeftWidth = originalWidth);
324
(newLeftWidth > aBoxPrevious["left"] + aBoxPrevious["width"]) && (newLeftWidth = aBoxPrevious["left"] + aBoxPrevious["width"]);
325
var newLeft = aBoxPrevious["left"] + (event.clientX - aBoxPrevious["clientX"]);
326
(newLeft > aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth) && (newLeft = aBoxPrevious["left"] + aBoxPrevious["width"] - originalWidth);
327
(newLeft < 0) && (newLeft = 0);
328
virtualBox.style.left = newLeft + "px";
329
virtualBox.style.width = newLeftWidth - box.clientLeft * 2 + "px";
330
bLeft = false;
331
}
332
};
333
var changeBoxSize = function(virtualBox) {
334
with(box.style) {
335
left = virtualBox.style.left;
336
top = virtualBox.style.top;
337
width = virtualBox.style.width;
338
height = virtualBox.style.height;
339
}
340
}
341
};
342
//窗口按钮函数
343
boxButton = function() {
344
var box = document.getElementById("box");
345
var boxHeader = document.getElementById("boxHeader");
346
var aButton = document.getElementById("button").getElementsByTagName("div");
347
var showButton = document.getElementById("showButton");
348
var span = showButton.getElementsByTagName("span")[0];
349
var bIsMin = bIsMax = false; //目前状态是否最小 or 最大
350
boxHeader.ondblclick = function() {
351
maximize();
352
}
353
for(var i = 0; i < aButton.length; i++) {
354
aButton[i].index = i;
355
aButton[i].onmouseover = function() {
356
aButton[this.index].style.background = "#AAA";
357
document.body.style.cursor = "pointer";
358
};
359
aButton[i].onmouseout = function() {
360
aButton[this.index].style.background = "";
361
document.body.style.cursor = ""
362
};
363
aButton[i].onclick = function() {
364
switch(this.index) {
365
case 0:
366
minimize();
367
break;
368
case 1:
369
maximize();
370
break;
371
case 2:
372
close();
373
break;
374
default:
375
break;
376
}
377
};
378
}
379
var minimize = function() {
380
if(bIsMin) {
381
resumeBox();
382
bIsMin = false;
383
}
384
else {
385
box.style.width = "89px";
386
box.style.height = "32px";
387
box.style.left = "2%";
388
box.style.top = box.style.top = document.body.offsetHeight - box.offsetHeight - 15 + "px";
389
bIsMin = true;
390
bIsMax = false;
391
}
392
};
393
var maximize = function() {
394
if(bIsMax) {
395
resumeBox();
396
bIsMax = false;
397
}
398
else {
399
box.style.width = document.body.scrollWidth - 10 + "px";
400
box.style.height = document.body.scrollHeight - 10 + "px";
401
box.style.left = "5px";
402
box.style.top = "5px";
403
bIsMax = true;
404
bIsMin = false;
405
}
406
};
407
var close = function() {
408
box.style.display = "none";
409
showButton.style.display = "block";
410
};
411
var resumeBox = function() {
412
box.style.top = "30%";
413
box.style.left = "40%";
414
box.style.width = "250px";
415
box.style.height = "150px";
416
};
417
showButton.onmousedown = function() {
418
span.innerHTML = "^o^";
419
};
420
showButton.onclick = function() {
421
this.style.display = "none";
422
span.innerHTML = ">_423
resumeBox();
424
box.style.display = "block";
425
};
426
};
427
window.onload = function() {
428
changeSize();
429
dragDiv();
430
boxButton();
431
};
432
《script》
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
>_<
居然关掉人家,讨厌~
快打开
455
456
457
html5 模仿苹果桌面,JavaScript模仿桌面窗口相关推荐
- html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)
新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐 ...
- 【OpenGL】二十四、OpenGL 纹理贴图 ( 读取文件内容 | 桌面程序添加控制台窗口 | ‘fopen‘: This function may be unsafe 错误处理 )
文章目录 一.文件读取 二.报错处理 ( 'fopen': This function or variable may be unsafe. ) 三.桌面程序添加控制台窗口 四.相关资源 一.文件读取 ...
- AIR:使用 HTML + Javascript 开发桌面应用
AIR:使用 HTML + Javascript 开发桌面应用 背景 断断续续用Winform和WPF开发过一些小工具,始终不得其法门,在玩Flex的时候就接触过AIR,最近发现可以用HTML + J ...
- 怎样取消Windows 10的虚拟桌面切换动画和窗口动画
怎样取消Windows 10的虚拟桌面切换动画和窗口动画 对于晕3D的人来说这是真的要命. 步骤: 在"这台电脑"上点击右键(如bai何在Win10桌面上显示"du这台电 ...
- win8计算机桌面字体,win8.1桌面字体颜色_Win8更换桌面主题(壁纸、窗口颜色)的操作步骤_win8个性化颜色...
Win7.Win8系统中都内置个性化选项,用户可自定义设置桌面壁纸.窗口颜色等,也可以更换桌面主题,那么Win8系统如何更换主题呢?下面小编就为大家介绍下Win8电脑更换桌面主题的具体操作. Win8 ...
- 基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
- 模仿苹果生态系统,谷歌2022年将致力于跨平台设备整合
谷歌在 CES 2022 上宣布了超过 13 个不同的新软件功能,包括 AirPods 快速切换,承诺在 Chromebook 上镜像安卓文本应用的软件等.这是谷歌"Better Toget ...
- 给崩坏三桌面版的启动窗口加个启动音效
原理 使用vbs脚本,监控电脑所有的进程,一旦出现崩坏三桌面版的启动窗口进程就播放一次音效. vbs脚本制作过程 第一步:准备好你想要播放的音乐或音效,如下. 第二步:在桌面上创建一个txt文本,文件 ...
- JavaScript模仿CF王者轮回
JavaScript模仿CF王者轮回 <html> <head><meta name="viewport" content="width=d ...
最新文章
- 开启一个新的终端并执行特定的命令
- poj2186(强连通分量分解)
- pandas自定义设置dataframe每个索引的标签、自定义设置索引的列名称(customize index name and index label)
- 1.1 什么是Hive
- ×××S 2012 聚合函数 -- 介绍
- Spring Boot学习笔记-进阶(3)
- 使用 servlet 连接数据库
- ios时间相差多少天_上海自驾拉萨,走川进青出,应如何规划线路?需要多少天时间?...
- qtreewidgetitem 选中背景颜色_列表式报表阶梯背景色效果
- CocoaPods管理依赖库
- 24套JAVA企业实战项目教程资源分享
- Hive精选高频面试题
- html提示版本过低升级,IE8浏览器提示版本过低怎样升级呢?
- 办公必备的WPS Office 2021 for mac(wps 2021中文版)
- HoG特征以及SVM的配合
- hadoop集群搭建详述
- android手机的内部存储
- ios传智播客_如何在iOS中创建播客播放列表
- 一个聊天场景的思考:初聊尬聊
- 华为认证考试需要准备什么