1.图片轮播基础之缓速轮播
◆使用封装的缓慢速动画来DIY滑动轮播图，也就是鼠标移动到123456这些数字上后，图片以缓慢速滑动的方式进行切换。
使用封装的缓速动画制作滑动轮播图
1
2
3
4
5
◆使用封装的缓速动画来DIY左右轮播图，也就是点击左右按钮的时候，图片左右缓速切换。
使用封装的缓速动画制作左右轮播图
<
>
使用封装的缓速动画制作无缝轮播图
<
>
2.使用缓速动画加scroll来DIY补充：楼层缓速跳跃
◆楼层缓速跳跃：同时设置html，body，ul，li的width:100%;height:100%，会让li继承占满一整页空间，因为这个时候html、body、ul、li的宽度和高度都是默认占满一整页，无论怎么放大缩小，都是默认占满一整页。
楼层缓速跳跃
- 大仙女
- 大熊猫
- 大小熊
- 大考拉
- 大袋鼠
- 小仙女
- 小熊猫
- 小小熊
- 小考拉
- 小袋鼠
3.event对象
◆在触发dom上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event，但支持的方式不同。例如操作鼠标时，就会添加鼠标位置的相关信息到事件对象中，普通浏览器支持event（传参数），但是IE678只支持 window.event(不传参数)
document.onclick=function(event){
//兼容性写法
event=event||window.event
console.log(event);
}在IE678中，通过传参数的方式是无法获取到event对象的，只能够使用window.event，但是在一些主流浏览器上可以通过传递参数的方式获取event对象，所以以上的兼容性写法由此而来。
◆event对象的相关属性值
event对象
4.pageY与screenY与clientY的区别
◆event对象的pageY和pageX、screenY和screenX、clientY和clientX都是很常用的属性。
◆pageY和pageX是以页面文档(0,0)为基准的，页面文档就是html区域，指的是整个html区域，无论html页面有多长
◆screenY和screenX是以屏幕(0,0)点为基准，屏幕就是你的显示器里的桌面
◆clientY和clientX是以浏览器（浏览器可视区域）的(0,0)点为基准，浏览器指的也是html区域，指的html区域是指当前可见的那部分的html区域
◆当页面被卷去的距离为0时，pageY和pageX与clientY和clientX是一样的，但是当页面被卷去的距离不为0时，pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft，这就是以页面为基准和以浏览器为基准的区别，在IE678中不支持pageX和pageY这两个属性，所以只能通过pageY=clientY+scroll().scrollTop,pageX=clientX+scroll().scrollLeft来实现兼容，通过event对象获取鼠标位于页面文档的真实坐标，获取鼠标位于页面文档的真实坐标的兼容性写法
var pageX=event.pageX||event.clientX+scroll().scrollLeft;
var pageY=event.pageY||event.clientY+scroll().scrollTop;◆
pageY与screenY与clientY的区别
5.使用event对象配合offset家族和scroll家族来DIY动画：鼠标点击后小图片缓速跟随的动画
◆鼠标点击后小图片缓速跟随的动画：鼠标每点击页面中某个位置，都会让这个小图片以缓速移动的方式移动到这个位置。
鼠标点击后小图片缓速跟随的动画
6.使用event对象配合offset家族和scroll家族来DIY动画补充一：指定区域图片放大镜
◆图片放大镜基础之获取小鼠标基于小盒子的坐标值
获取小鼠标基于小盒子的坐标值
鼠标位于盒子的x轴坐标值：100 px
鼠标位于盒子的y轴坐标值：100 px
◆图片放大镜进阶之鼠标区域性移动时显示放大镜效果：图片放大的比例计算公式：（大图片的实际宽度-大盒子的实际宽度）/(小盒子的实际宽度-遮盖层的实际宽度)，使用的原理是，让多余的部分进行对比，这样才能够更加准确的获取比例。
鼠标区域性移动时显示放大镜效果
7.使用event对象配合offset家族和scroll家族来DIY动画补充二：鼠标拖拽自定义的确认框移动+模拟自定义的窗体滚动条滚动
◆鼠标拖拽自定义的确认框移动：这个确认框有一点点好看，之前文章说的制作无限弹窗，这个demo中有提到过一小部分，把代码一解注释就会出现效果了。
鼠标拖拽自定义的确认框移动
提示框
你真的真的真的要关闭吗？
狠心关掉让它待着
◆模拟自定义的窗体滚动条滚动
◇动态设置滚动条的滑块儿的长度，公式：可见的内容的高度/内容的高度*可见的内容的高度。
◇清除选中的内容：
△window.getSelection().removeAllRanges();在IE9及以上等其它主流浏览器支持这种清除选中内容的方式，如IE9、Firefox、Safari、Chrome和Opera支持window.getSelection().removeAllRanges();
△ocument.selection.empty();IE9以下支持这种清除选中的内容的方式。
△兼容性写法：window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
◇这个窗体有一点点好看，不仅有滑块儿，还可以移动窗体，是一个综合性的demo。
模拟自定义的窗体滚动条滚动
会话框
--------------------------开始--------------------------。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
横看成林侧成峰，远近高低各不同。横看成林侧成峰，远近高低各不同。
--------------------------结束--------------------------。