JS DOM 编程艺术(第2版)读书笔记 第12章 综合示例

  1 /**
2 * addLoadEvent
3 */
4 function addLoadEvent(func) {
5 var oldonload = window.onload;
6 if(typeof oldonload != "function"){
7 window.onload = func;
8 }else{
9 window.onload = function(){
10 oldonload();
11 func();
12 }
13 }
14 }
15
16 /**
17 * insterAfter
18 */
19 function insertAfter(newEle, targetEle) {
20 var parent = targetEle.parentNode;
21 if (parent.lastChild == targetEle) {
22 parent.appendChild(newEle);
23 }else{
24 targetEle.insertBefore(newEle, targetEle.nextSibling)
25 }
26 }
27
28 /**
29 * addClass
30 */
31 function addClass(ele, value) {
32 if (!ele.className) {
33 ele.className = value;
34 }else {
35 ele.className = ele.className + " " + value;
36 }
37 }
38
39 /**
40 * highlightPage
41 */
42 function highlightPage() {
43 var nav = document.getElementsByTagName("nav")[0];
44 var links = nav.getElementsByTagName("a");
45 for (var i = 0; i < links.length; i++) {
46 var url = links[i].getAttribute("href");
47 if (window.location.href.indexOf(url) != -1) {
48 links[i].className = "here";
49 }
50 }
51 }
52 addLoadEvent(highlightPage);
53
54 /**
55 * photos
56 */
57 function prepareGallery(){
58
59 // 检测对象或方法是否存在
60 if(!document.getElementById) return false;
61 if(!document.getElementsByTagName) return false;
62 if(!document.getElementById("imgBox"))return false;
63 var gallery = document.getElementById("imgBox");
64 links = gallery.getElementsByTagName("a");
65 for (var i = 0, l = links.length; i < l; i++) {
66 links[i].onclick = function(){
67 // 巧妙的运用showPic函数的返回值
68 // return showPic(this) ? false : true;
69 return !showPic(this);
70 }
71 //links[i].onkeypress = //links[i].onclick;
72 }
73 }
74
75 function showPic(obj) {
76 // 对象检测
77 if(!document.getElementById("placeholder")) return false;
78
79 /*
80 * 获得当前对象的href值,如安装有本地服务器:
81 * IE6和IE7返回 "http://localhost/images/Koala.jpg"
82 * 标准浏览器返回 "images/Koala.jpg"
83 * 为了然所有浏览器都返回一致的结果,给getAttribute()添加第二个参数为2.
84 * 谨记:getAttribute("href")和getAttribute("href", 2);浏览器兼容性。
85 */
86 var url = obj.getAttribute("href",2);
87 var place = document.getElementById("placeholder");
88 place.setAttribute("src", url);
89
90 if(document.getElementById("description")){
91 var text = obj.getAttribute("title");
92 var description = document.getElementById("description");
93 // firstChild必须存在,也就是说 <p id="description">这里必须有内容</p> 下面这行代码才有效。 其实这种情况常用 description.innerHTML = text;
94 description.firstChild.nodeValue = text;
95 }
96 return true;
97 }
98
99 function getHTTPObject(){
100 if(typeof XMLHttpRequest == "undefinded"){
101 XMLHttpRequest = function(){
102 try{return new ActiveXObject("Msxml2.XMLHTTP6.0");}
103 catch(e){}
104 try{return new ActiveXObject("Msxml2.XMLHTTP3.0");}
105 catch(e){}
106 try{return new ActiveXObject("Msxml2.XMLHTTP");}
107 catch(e){}
108 return false;
109 }
110 }
111 return new XMLHttpRequest();
112 }
113
114 /**
115 * readyState:
116 * 0 表示未初始化
117 * 1 表示正在加载
118 * 2 表示加载完成
119 * 3 表示正在交互
120 * 4 表示完成
121 */
122 function getNewContent() {
123 var request = getHTTPObject();
124 if(request){
125 request.open("GET", "example.txt", true);
126 request.onreadystatechange = function(){
127 // 脚本依赖服务器的响应必须放到这里
128 if(request.readyState == 4){
129 var p = document.createElement("p");
130 var txt = document.createTextNode(request.responseText);
131 p.appendChild(txt);
132 document.body.appendChild(p);
133 }
134 }
135 request.send(null);
136 }else{
137 alert("sorry you browser does't support XMLHttRequest");
138 }
139 alert("Function Done");
140 }
141
142 addLoadEvent(getNewContent);
143
144 /**
145 * moveElement
146 */
147 function moveElement(elementID, final_x, final_y, interval) {
148 var elem = document.getElementById(elementID);
149 var xpos = parseInt(elem.style.left);
150 var ypos = parseInt(elem.style.top);
151 if (elem.movement) {
152 clearTimeout(elem.movement);
153 }
154 var dist = 0;
155 if (xpos == final_x && ypos == final_y) {
156 return true;
157 }
158 if (xpos < final_x){
159 dist = Math.ceil((final_x - xpos) / 10);
160 xpos = xpos + dist;
161 }
162 if (xpos > final_x) {
163 dist = Math.ceil((xpos - final_x) / 10);
164 xpos = xpos - dist;
165 }
166 if (ypos < final_y) {
167 dist = Math.ceil((final_y - ypos) / 10);
168 ypos = ypos + dist;
169 }
170 if (ypos > final_y) {
171 dist = Math.ceil((ypos - final_y) / 10);
172 ypos = ypos - dist;
173 }
174 elem.style.left = xpos + "px";
175 elem.style.top = ypos + "px";
176 var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+interval+")";
177 elem.movement = setTimeout(repeat, interval);
178 }
posted @ 2012-04-08 14:39  vimer  阅读(178)  评论(0编辑  收藏  举报