JavaScript、jQuery、HTML5、Node.j

技術(shù)很多，例子很多，只好慢慢學(xué)，慢慢實(shí)踐！！現(xiàn)在學(xué)的這本書是【JavaScript實(shí)戰(zhàn)----JavaScript、jQuery、HTML5、Node.js實(shí)例大全】

JavaScript、jQuery、HTML5、Node.js實(shí)例大全-讀書筆記2

3.3 響應(yīng)鼠標(biāo)動(dòng)作

圖3-2的效果已經(jīng)有了，需要鼠標(biāo)來(lái)操作展示想看的照片，這就需要在相應(yīng)的地方加上事件。

3.3.1 響應(yīng)小照片單擊動(dòng)作

在3.2.3的代碼里提供了顯示小圖列表的eg.showThumb()方法，在單擊小圖片時(shí)要顯示大圖片，這需要調(diào)用eg.showBig()方法，只有在單擊小圖片的時(shí)候響應(yīng)單擊事件才行，所以需要用eg.addListener()方法來(lái)實(shí)現(xiàn)，具體代碼見【范例3-4】。

【范例3-4 響應(yīng)小照片單擊動(dòng)作】

1.eg.showThumb = function(group){
2.var ul = eg.$("smallPhotosList");
3.ul.innerHTML = ''; //每次顯示時(shí)要清空舊的內(nèi)容
4. var start = (group-1)*eg.groupSize; //計(jì)算需要的data數(shù)據(jù)的開始位置
5. var end = group*eg.groupSize //計(jì)算需要的data數(shù)據(jù)的結(jié)束位置
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事件監(jiān)聽
11. eg.showNumber = i; //記錄選中的圖標(biāo)序號(hào) 供其他函數(shù)調(diào)用
12. eg.showBig();
13. });
14. })(i); //將i作為值傳遞進(jìn)去
15. ul.appendChild(li);
16. }
17. };
18. eg.showBig = function(){ //根據(jù)某個(gè)編號(hào)顯示大圖
19. eg.$("bigPhotoSrc").src =eg.$("thumb"+eg.showNumber).src.replace("thumb","photo")
20. };

【范例3-4】中第9行就是響應(yīng)小照片單擊動(dòng)作的代碼，這里使用了一個(gè)閉包，即一個(gè)自調(diào)用的匿名函數(shù)。(function(){})()是最簡(jiǎn)單的閉包。大括號(hào)的內(nèi)容會(huì)順序執(zhí)行。如果去掉第9行和第14行代碼，那么會(huì)發(fā)現(xiàn)始終顯示當(dāng)前組照片中的最后1張，在for語(yǔ)句體里一般要用閉包把變量值傳到內(nèi)部的綁定事件里。

最具士兵突擊實(shí)戰(zhàn)類型的JavaScript