27 Click And Drag 中文指南

在最外层的items元素上监听鼠标的按下，移动，弹起事件并编写相应的回调函数即可，在对应的回调函数中获取到鼠标横向滑动的距离，将该距离值翻倍后赋值予条幅的scrollLeft属性可调整元素在水平方向上滚动的位置。

1.在条幅容器上监听鼠标按下事件

2.在条幅容器上监听鼠标弹起事件

本例中的js部分并不复杂，令人感兴趣的是样式部分使用了较多CSS3高级用法，使得元素在滚动过程中呈现出透视效果，笔者在此对CSS的实现方法作以简单说明，感兴趣的小伙伴可以自行查找资料深入学习。
除去颜色部分，类中的动态效果其实只用到了3行代码: