Javascript特效开发（四）

本文内容承接Javascript特效开发（三）

第六章    Javascript特效开发第五阶段

6.1元素的位置和尺寸操作

获得元素位置 获得元素尺寸

6.2滚动条位置操作

scollTop，是指滚动上去的部分的的高度。

整个滚动元素宽高则是scollHeight，scollWidth

获取具有滚动条元素的属性

（1）事例一

简单的滚动条元素的属性获取和设置 运行结果

（2）事例二：（定时器+滚动条实现自动阅读效果）

自动阅读效果 运行结果，点击开始自动滚动，点击停止停止滚动

除此之外还可以实现网页内漂浮广告效果，详情见文章《漂浮广告效果》。

窗口改变事件 window.onresize = function(){};

6.3事件对象

什么是事件对象

事件对象只有在事件发生的时候才产生，是个局部变量，只有在事件处理程序中被调用，事件结束时这个变量也会被销毁。

如何获取事件对象 关于鼠标事件 事例

6.4 键盘事件对象

window.onkeydown = function(){e};键盘按下事件

window.onkeyup = function(){e};键盘抬起事件

window.onkeypress = function(){e};安下并松开任意的数字或字母键

键盘事件对象的属性  键盘事件事例

利用键盘事件可以实现打字游戏等功能。

6.5事件流 阻止元素默认事件

事件流 阻止事件流

效果：

效果图

若不阻止事件流，点击蓝翔所在div会依次alert  蓝翔--->山东--->中国; 加入阻止事件流后，点击只alert 蓝翔。

实现代码：

阻止事件流

阻止浏览器默认行为，一般用于a标签和form表单。常用方法是利用重定向，'javaxcript:viod(0)'。

阻止浏览器默认行为 方法一 阻止浏览器默认行为 方法二

6.6日期对象

在Javascript中日期也是内置对象，所以我们要对日期进行获取或操作，必须实例化对象。

获取日期信息的方法 创建日期对象 日期设置

可使用日期对象实现倒计时效果。

思路：1、结束事件、当前时间；2、两个时间转化成毫秒的差；3、毫秒差中有多少个整年整月整日整的时分秒；4、定时器控制

---

《Javascript特效开发（一）》、《Javascript特效开发（二）》、《Javascript特效开发（三）》以及《Javascript特效开发（四）》对Javacript的ECMAscript部分、DOM和BOM部分进行基础知识讲解。后续更多精彩内容敬请期待吧~

---

如有问题欢迎交流。

如转载请注明出处，谢谢！