JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記3
來源：程序員人生 發布時間：2014-11-12 08:49:49 閱讀次數：2401次
技術很多，例子很多，只好漸漸學，漸漸實踐！！現在學的這本書是【JavaScript實戰----JavaScript、jQuery、HTML5、Node.js實例大全】
JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記2
3.3 響應鼠標動作
圖3⑵的效果已有了，需要鼠標來操作展現想看的照片，這就需要在相應的地方加上事件。
3.3.1 響應小照片單擊動作
在3.2.3的代碼里提供了顯示小圖列表的eg.showThumb()方法，在單擊小圖片時要顯示大圖片，這需要調用eg.showBig()方法，只有在單擊小圖片的時候響應單擊事件才行，所以需要用eg.addListener()方法來實現，具體代碼見【范例3⑷】。
【范例3⑷ 響應小照片單擊動作】
1.eg.showThumb = function(group){
2.var ul = eg.$("smallPhotosList");
3.ul.innerHTML = ''; //每次顯示時要清空舊的內容
4. var start = (group⑴)*eg.groupSize; //計算需要的data數據的開始位置
5. var end = group*eg.groupSize //計算需要的data數據的結束位置
6. for(vari=start;(i<end&&i<eg.data.length);i++){
7. var li = document.createElement("li");
8. li.innerHTML = '<imgsrc="'+eg.data[i][1]+'" id="thumb'+i+'"width="80" height="40"/>';
9. (function(i){
10. eg.addListener(li,"click",function(){ //增加click事件監聽
11. eg.showNumber = i; //記錄選中的圖標序號 供其他函數調用
12. eg.showBig();
13. });
14. })(i); //將i作為值傳遞進去
15. ul.appendChild(li);
16. }
17. };
18. eg.showBig = function(){ //根據某個編號顯示大圖
19. eg.$("bigPhotoSrc").src =eg.$("thumb"+eg.showNumber).src.replace("thumb","photo")
20. };
【范例3⑷】中第9行就是響應小照片單擊動作的代碼，這里使用了1個閉包，即1個自調用的匿名函數。(function(){})()是最簡單的閉包。大括號的內容會順序履行。如果去掉第9行和第14行代碼，那末會發現始終顯示當前組照片中的最后1張，在for語句體里1般要用閉包把變量值傳到內部的綁定事件里。
最具兵士突擊實戰類型的JavaScript
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
