JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
来源：程序员人生 发布时间：2014-11-12 08:49:49 阅读次数：2262次
技术很多，例子很多，只好渐渐学，渐渐实践！！现在学的这本书是【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
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
