JavaScript“三基”教程

传智播客 网页平面 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 1 页 面向初学者的 JavaScript“三基”教程 —— 基本原理 基本特效 基本经验（连载·第 4讲） 邵山欢 传智播客 网页平面设计学院 http://icd.itcast.cn 发布 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 2 页 目录 目录................................................................................................................................................................2 一、创建元素结点........................................................................................................................................3 二、仿百度新闻无动画焦点轮播图效果....................................................................................................4 三、JavaScript代码的套用.......................................................................................................................... 5 四、定时器....................................................................................................................................................5 4.1 “设 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 先关”原则.........................................................................................................................6 4.2 “判终停表”原则........................................................................................................................... 7 4.3 “步标整除”原则.............................................................................................................................. 7 五、有动画的焦点图轮播............................................................................................................................8 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 3 页 一、创建元素结点 JavaScript也可以操作 HTML标签。 把网页比喻成舞台，HTML标签演员，CSS就是化妆师，JavaScript是剧本，用户是导演。 document.createElement(参数) 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 用来创建结点，创建的结点是孤立的，不会在 HTML中呈现。 直到用： object.appedChild(结点名)来追加结点 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 4 页 二、仿百度新闻无动画焦点轮播图效果 耦合性降到最低：尽量少用 id，尽量在 JavaScript程序中将够预见未来需求。用清晰的中文写 出注释，方便大家去企业之后套用。 原理：交替使每个 img标记显示或者隐藏 一定要将所有要显示的图片，都在 HTML中罗列： 1）语义好 2）方便后台 工程 路基工程安全技术交底工程项目施工成本控制工程量增项单年度零星工程技术标正投影法基本原理 师工作 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 5 页 三、JavaScript代码的套用 不要直接生搬硬套，一定要充分理解原来的代码原理后，再动手。 代码的结构一定要和原来的代码结构相同，否则会影响 js代码的实现。 四、定时器 window.setInterval( ) 、 clearInterval( )方法 window.setTimeout()方法 JavaScript中定时器是很简陋的。 一旦调用了window对象的 setInterval方 法，定时器就自己开始工作了。甚至没 有“开始命令” 但是计时器有停止功能，一旦将一个定 时器的变量名，用 clearInterval方法调用 （当做参数）计时器就销毁了。 语句 var timer = setInterval(fun,10); 不是 setInterval(fun(),10) 也不是 setInterval(“fun()”,10); 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 6 页 把这里的 10，称为“步长” 把 30称为“间隔时间” 动画的原理就是视觉残留，实验 证明 住所证明下载场所使用证明下载诊断证明下载住所证明下载爱问住所证明下载爱问 ，人眼在一秒钟接受 25张静态图片连续滚动的时候，人会认 为这个图片是连续动的。 连续点击“开始“按钮，盒子跑的越来越 快。 这是由于 JavaScript对于将一个定时器赋 予一个变量的理解有误。 它会将定时器累加。 4.1 “设表先关”原则 在 setInterval之前，前 clearInterval一下，可以有效解决定时器累加的毛病。 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 7 页 4.2 “判终停表”原则 用==来判断盒子是否运动到终 点。这么做的好处是，用严格的、 苛刻的条件来设置停表，那么一 旦盒子停止运动了，那么这个盒 子一定运动到了 600位置。 今后业务逻辑复杂了，比如 myleft值变成 800了，那么表也 停了。 4.3 “步标整除”原则 说的就是步长要能整除目标。 在上面的例子中，6能整除 600，所以符合”步标整除“原则。 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 8 页 五、有动画的焦点图轮播 大麦网首页效果 原理： ul中所有 li排成一行， 父盒子 overflow:hidden; 有高有宽，所以只能看见一部分内容。 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash 四种技能 http://icd.itcast.cn 第 9 页 轮播图布局要点： 第 1： ul要很长，我们设置成了 8000px 第 2： 父盒子 overflow:hidden; 第 3： 由于要给 ul加 left属性控制图片显示，所以需要给 ul加定位。 目录 一、创建元素结点 二、仿百度新闻无动画焦点轮播图效果 三、JavaScript代码的套用 四、定时器 4.1“设表先关”原则 4.2“判终停表”原则 4.3“步标整除”原则 五、有动画的焦点图轮播