首页 > 代码库 > JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
3.3 响应鼠标动作
图3-2的效果已经有了,需要鼠标来操作展示想看的照片,这就需要在相应的地方加上事件。
3.3.1 响应小照片单击动作
在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法,在单击小图片时要显示大图片,这需要调用eg.showBig()方法,只有在单击小图片的时候响应单击事件才行,所以需要用eg.addListener()方法来实现,具体代码见【范例3-4】。
【范例3-4 响应小照片单击动作】
1.eg.showThumb = function(group){ 2.var ul = eg.$("smallPhotosList"); 3.ul.innerHTML = ''; //每次显示时要清空旧的内容 4. var start = (group-1)*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=http://www.mamicode.com/"'+eg.data[i][1]+'" id="thumb'+i+'"width="80" height="40"/>';>【范例3-4】中第9行就是响应小照片单击动作的代码,这里使用了一个闭包,即一个自调用的匿名函数。(function(){})()是最简单的闭包。大括号的内容会顺序执行。如果去掉第9行和第14行代码,那么会发现始终显示当前组照片中的最后1张,在for语句体里一般要用闭包把变量值传到内部的绑定事件里。最具士兵突击实战类型的JavaScript
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。