zoukankan      html  css  js  c++  java
  • JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术非常多,样例非常多。仅仅好慢慢学,慢慢实践!!如今学的这本书是【JavaScript实战----JavaScriptjQueryHTML5Node.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




  • 相关阅读:
    csv与xlsx导出
    行业报告
    How JavaScript works: an overview of the engine, the runtime, and the call stack
    CAS单点登陆/oAuth2授权登陆
    YChaos生成混沌图像
    Why数学图像生成工具
    WHY数学图形可视化工具(开源)
    WHY翻写NEHE与红龙的3D图形程序 [开源]
    四边形密铺平面
    数学图形(1.50)三曲线
  • 原文地址:https://www.cnblogs.com/yangykaifa/p/7224723.html
Copyright © 2011-2022 走看看