-
今天用原生的JS完成了一个简单的登录滑块
- 源码在 : https://gitee.com/jimmyxuexue/login_slider
- 先上图
- ok 要实现这两个功能最重要的就是知道原生JS对于拖动元素的处理方式,JS提供了三个事件,分别是 onmousedown鼠标按下 onmousemove鼠标移动 onmouseup鼠标抬起这三个事件 我们只需要根据这三个事件来对元素的位置进行处理即可 元素肯定是要设置定位的
- 这三个鼠标事件都会默认出入一个参数e 这个e包含了鼠标点击时的所有信息, e.clientX代表的是鼠标点击时它的位置到鼠标最左边的距离
-
一个小知识点是当滑块已经到了目的地,我们就要取消掉鼠标的移动事件
- 我们可以使用 元素.onmousemove = null 来取消鼠标移动的事件
-
还有一个知识点是当我们页面中的文本不想被选中时经常会发生不小心的选中,我们可以使用css的一条语句来控制文字不可被选中
- user-select: none;
-
哈哈哈 以上就是用到的所有的知识点啦 ~~
原生JS好看且使用的登录滑块
最新推荐文章于 2023-07-04 10:18:43 发布