![](https://img.haomeiwen.com/i4347155/642609f23384e07d.png)
首先,我们看上面展示的效果图,分为左、中间有个拖动条、右这三部分。
所以布局如下:
dom:
![](https://img.haomeiwen.com/i4347155/f275b07f1000cfc0.png)
css:
![](https://img.haomeiwen.com/i4347155/1e41edce0985d12a.png)
js设计思想:
第一、做这种页面拖拽效果,我们首先想到的一定是鼠标事件,是的,这样就离成功不远了。
第二、鼠标的那些事件呢? 我们得点击鼠标mousedown、点完之后还得移动才能实现拖拽吧那就是还有onmousemove,这两个过程都完成了是不是就得松开鼠标或者释放了mouseup。
第三、在这三个鼠标事件中我们具体要做怎样的操作呢,mousedown拖动条的时候获取它距离左面的距离left();mousemove的时候我们要让按钮移动,但是左右布不能超界,mouseup的时候停止拖动这个动作了。
![](https://img.haomeiwen.com/i4347155/dca7e9dd437ba3d5.png)
![](https://img.haomeiwen.com/i4347155/d4e1168ed5366fd7.png)
![](https://img.haomeiwen.com/i4347155/2bc9a156e0584aa2.png)
很简单的几个步骤就可以实现一个很有比格的效果,
GitHub:https://github.com/pursuedreams/pursuedreams
欢迎大家一起学习探讨。
网友评论