首先说下思想 flex或者其他布局方式，实现左右分割布局，主盒子宽度100%，左右布局中包含一个分割条（可在布局容器中，也可以单独定义）为分隔条绑定鼠标点击事件，为document绑定鼠标移动事件和鼠标放开事件，通过监听鼠标移动事件和上一个状态保存下来的鼠标位置作对比，判断当前鼠标移动方向（往左还是往右）然后计算当前鼠标位置和鼠标点击位置的距离，来计算左右容器的变化，然后通过dom的方式设置宽度

首先，我们先打开codepen，注册/登陆 codepen官网 https://codepen.io/ 注册或登陆时候，你可以选择 facebook、github或Twitter进行直接登陆。 邮箱验证 首次使用codepen，需要做一次邮箱验证，会有提示，大家点击验证，会有邮箱消息，进入邮箱点击认证链接认证。 创建 在左侧导航栏，选择 Pen→Pen 即可创建一个空白的代码模

见多识广：CodePen项目网站简介 这篇文章发布于 2012年07月17日，星期二，18:29，归类于 js相关。 阅读 42035 次, 今日 9 次 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2499 一、CodePen是干嘛的？ Code