The cause of

When I was running yesterday, I was very interested to see the sliding effect on an APP (sports health of Huawei mobile phone). After I came back, I wondered if IT could be implemented on DOM, hence this article. IO /imgss/embed… :

wEEvKB

See the Pen wEEvKB by imgss (@imgss) on CodePen.

Post the effect picture on the app, the imitation effect can be said to be unsatisfactory:

implementation

In fact, the principle is very simple, that is, when the dot moves, calculate the distance between the number and the dot, to control the rise and fall of the number.

First, make the dot move with the mouse: the code is as follows:

slide.addEventListener('mousedown'.function(e){
  e.preventDefault()
  let left = parseInt(slide.style.left) || 0
  let startX = e.clientX
  // The maximum distance that a slider can move
  let maxLength = document.querySelector('.table').getBoundingClientRect().width - slideWidth
  function move(e){
	// Move logic

  }
  document.addEventListener('mousemove', move)
  
  document.addEventListener('mouseup'.function(){
    document.removeEventListener('mousemove', move)
  })
})
Copy the code

This code to monitor the three events, the mousedown, mouseup, mousemove, when the mouse click, triggers the mousedown event of slide block, at the same time give the document binding the mousemove and mouseup event, can make the slider moves with the mouse, when the mouse to bounce, Make the slider no longer move with the mouse.

The reason to listen for mousemove events on the Document element is because if you listen on the slider, it is easy to move the mouse too fast and leave the area of the slider, and the Mousemove event becomes invalid. Let’s look at the move function:

  function move(e){
    e.preventDefault()
    let moveX = e.clientX - startX
    if(left + moveX < 0 || left + moveX > maxLength) {
      return
    }
    newLeft = left + moveX
    let newCenterLeft = newLeft + slideWidth / 2
    slide.style.left = newLeft + 'px'
    // Control the number to go up and down
    // console.log('========')
    for(let label of labels){

      let dist = label.left - newCenterLeft
      // console.log(dist, slideWidth/2)
      if(Math.abs(dist) <= slideWidth / 2){
        label.el.style.top = Math.abs(dist) - slideWidth / 2 + 'px'
        label.el.style.opacity = 0.3 + Math.abs(1 - dist / (slideWidth / 2)) * 0.7
      } else {
        label.el.style.top = '0px'
        label.el.style.opacity = 0.3}}}Copy the code

The move function does two main things, one is to change the position of the slider, and the other is to change the height of the number by determining the distance between the number and the slider in real time. Changing position is done by changing the element’s left/top style. In terms of shape, the edge of the slider is a semicircle, so the height between the number and the bottom (y) and the distance between the number and the center of the slider (x) should be a non-linear relationship. The function expression is as follows:

Y = math.sqrt (R*R - x*x)// R is the slider edge radiusCopy the code

It’s a direct linear transformation of R minus x in the implementation. (after)