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="'+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-4】中第9行就是响应小照片单击动作的代码,这里使用了一个闭包。即一个自调用的匿名函数。
(function(){})()是最简单的闭包。
大括号的内容会顺序运行。假设去掉第9行和第14行代码,那么会发现始终显示当前组照片中的最后1张。在for语句体里一般要用闭包把变量值传到内部的绑定事件里。
最具士兵袭击实战类型的JavaScript
转载于:https://www.cnblogs.com/yangykaifa/p/7224723.html
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3相关推荐
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- Node.js: 深入浅出Nodejs读书笔记
今天终于把朴灵老师写的<深入浅出Node.js>给学习 完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内 ...
- Node.js入门经典 读书笔记(3)
本章中我们将讲述Node.js的作用 1.设计Node.js的目的 Node.js是构建在Chrome的JavaScript运行时之上的一个平台,用于简单构建快速的.可扩展的网络应用程序.Node.j ...
- HTML5/Node.js/JS 经验谈 (会员专属)【讲师辅导】-曾亮-专题视频课程
HTML5/Node.js/JS 经验谈 (会员专属)[讲师辅导]-5481人已学习 课程介绍 QQ 1405491181 链接 http://edu.csdn.net/lecture ...
- TWaver HTML5 + Node.js + express + socket.io + redis(六)
接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到: 1 ...
- TWaver HTML5 + Node.js + express + socket.io + redis(五)
接上一回TWaver HTML5 + Node.js + express + socket.io + redis(四), 这一篇您将了解到 1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删 ...
- sql经典实例_读书笔记 前三章
sql经典实例_读书笔记 温故SQL以及数据库相关知识 1.检索记录 select * from emp //检索所有列 where dep = 10 //选择出指定行 or comm is not ...
- node.js中公培训笔记大全(讲的一般,小白基础入门)
day01 本阶段的授课内容为 ES6 2天-3天 NodeJS 2天-3天 express 2天-3天 webpack 1天 MySQL数据库 2天 实战项目 2天 今天的授课内容为 1.ES5-严 ...
- JavaScript教程9 - Node.js
Node.js 安装Node.js https://nodejs.org/ npm npm其实是Node.js的包管理工具(package manager). 命令行模式 执行node hello.j ...
最新文章
- ormlite android studio,OrmLite-android入门体验
- 【c语言】蓝桥杯算法提高 简单加法
- centos 初学者_初学者:如何在Outlook 2013中创建和管理任务
- LeetCode 530二叉搜索树的最小绝对值差-简单
- Ubuntu扩大boot空间
- 【Kafka】kafka OutOfMemoryError: Direct buffer memory Java heap space
- 转:把二元查找树转变成排序的双向链表
- ucint核心边缘分析_ucinet社会网络分析笔记(一)网络密度、中心度、凝聚子群、核心-边缘...
- 云服务器超级鸟,超级鸟的自述_A3_新浪游戏_新浪网
- OpenCV判断图片是否是黑白图片
- leetcode-分糖果问题-84
- java gef_GefExample GEF的例子,用于eclipse 学习,非常好的源码材料。 Java Develop 238万源代码下载- www.pudn.com...
- 取消UL和OL符号以及padding和margin后恢复默认值的CSS
- 在html页面中怎么打印区域,网页打印代码,可以打印指定区域的
- Java统计字符串中字符重复次数
- java verify_JAVA结合testng断言verify(断言失败不中断继续执行)
- 谷歌字体下载安装(感觉没有很好用)
- 计算机锁屏打不开,电脑锁屏打不开怎么办没反应
- 【原创】MATLAB模糊控制算法Fuzzy Control
- Java—异或运算^的使用详解
热门文章
- ROS Kinetic 与STM32通信,控制一盏LED灯
- ubuntu16.04中安装tensflow教程
- 【机器视觉】 dev_set_check算子
- 【C++】Visual Studio 2019 三个版本比较
- 【Android】dip、dp、sp、pt和px的区别
- mysql safe无法启动_(转)mysqld_safe无法启动的解决办法
- C++代码片段(二)判断可变模板参数中是否包含某一特定类型
- 每天一道LeetCode-----根据先序遍历和中序遍历还原二叉树
- java学习笔记2022.1.12
- 关于Javaweb部署到linux服务器产生乱码?的原因分析