原生JS好看且使用的登录滑块

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值