JavaScript模仿桌面窗口
这个大概花了YQ一天多时间（虽然含杂大量酱油时间），第一次做，惊现各种debug。网上说的果然没错——debug的时间比写程序的时间多……明显是因为自己没有在敲代码之前做好准备，忽略了很多细节，引以为戒。废话少说，以下是这次自学的笔记：╰(￣▽￣)╯
添加了双击缩小放大窗口 & 改变窗口大小的预览效果
［博客文章网址，可运行代码查看效果］ == > windows/">http://yqjun.tk/javascript/js-copy-windows/
这次练习主要是用JS模仿了桌面窗口的移动、八个方向的缩放、最小化、最大化和关闭。目前未发现有BUG，能够在IE6实现所有功能，只是视觉效果一般。
1、窗口移动：其实就是根据鼠标移动坐标，改变div的left和top属性，并限制其不能超过浏览器的可视范围；
2、八个方向的缩放：八个方向，其实只调用4个方法，分别是“向北改变高度”、“向东改变宽度”、“向南改变高度”、“向西改变宽度”，4个方法都要控制范围不能超过浏览器可视范围，不能小于默认窗口的最小高宽（要注意的是不要忽略div的border宽度，不然即使1px也会将BUG不断累加）。至于另外4个方向，只需将对应的两个方法放在一起就行了。例如：从东南角改变大小，则需要调用“向东改变宽度”、“向南改变高度”两个方法即可；
3、最小化、最大化：监听按钮、改变div高宽位置、还原原始高宽位置；
4、关闭：简单的 display:none 和还原原始大小位置；
5、使用的CSS3：YQ自认为对CSS2掌握的还不够好，所以比较少去接触CSS3，不过CSS3真的太强大了。现在我使用的只有两个属性—— border-radius 和 box-shadow，简洁而又美丽。当然，无视IE6吧，YQ没有想过要将精力放在浏览器兼容上（特别是IE6）（ˊＡˋ） ;
6、简化程序：比如在窗口八个方向的缩放功能中（目前应该没资格叫模块吧？），YQ使用了switch函数和 bTopb Right bBottom bLeft 4个布尔值，将八个方向分成了四种来组合而成，所以这一part是YQ比较满意的地方(#￣▽￣#) ；但还是有很多地方YQ觉得还可以再简化一点，但是大脑有点短路……（′·ω·｀）;
7、用 && 代替 if(){}，这次YQ用了较多 && 来代替 if，出了代码看上去短点，但其实视觉效果可能没那么好，只是一时兴起。不知道效率较之if哪个高呢？还是一样？┐(—__—)┌
以下是代码(＞﹏＜)
001
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
002
<html xmlns="http://www.w3.org/1999/xhtml">
003
<head>
004
<title>JS山寨桌面窗口</title>
005
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
006
<style type="text/css" media="screen">
007
html, body, div {
008
margin: 0;
009
padding: 0;
010
}
011
html, body {
012
background: #FFFFFF;
013
width: 100%;
014
height: 100%;
015
overflow: hidden;
016
}
017
#box {
018
position: absolute;
019
top: 30%;
020
left: 40%;
021
width: 250px;
022
height: 150px;
023
background: #EEE;
024
border: 1px solid #666;
025
border-radius: 8px;
026
box-shadow: 2px 2px 5px #777;
027
}
028
/*标题栏*/
029
#boxHeader {
030
width: 100%;
031
height: 30px;
032
background: none!important;
033
background: #EEE;
034
border-bottom: 2px solid #AAA;
035
border-radius: 5px 5px 0 0;
036
}
037
#button {
038
&nb
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
