How to realize the sliding Crossing effect of small Ball by vue
This article mainly explains "vue how to achieve the ball sliding cross effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue how to achieve the ball sliding cross effect" bar!
Don't talk more nonsense and go straight to the code!
{{num}}
Script Code:
Export default {data () {return {num: 0,};}, methods: {fnstart (ev) {/ / small ball this.oDiv = ev.target; / / pagx: the distance from the mouse click position to the leftmost part of the page offsetLeft current element left to the largest box leftmost this.pageX = ev.changedTouches [0] .pageX-this.oDiv.offsetLeft _ document.ontouchmove = this.FnMove; _ document.ontouchend = this.FnEnd; / / the width of the parent element this.parent = ev.target [XSS _ clean] .offsetWidth; / / minus the width of the ball this.Width = this.parent-ev.target.offsetWidth; / / get the parent element this.parents = ev.target [XSS _ clean] / / get the child element this.child = this.parents.children; / / the right ball gets the ball this.Right = this.parents.children [0]; / / the left ball this.Left = this.parents.children [1] }, FnMove (ev) {/ / minus the slipping distance of the ball calculates the leftmost distance of the element to the far edge of the browser this.X = ev.changedTouches [0] .pageX-this.pageX; / / console.log (this.X, 1010101); / / determines that the ball equals zero and cannot go out if (this.X this.Width) {this.X = this.Width } / / Let the left ball slide, and the line changes with the change of color / / the value above is changed, which is divided into 100 parts: this.xnum = this.X / 3.7; / / take the integer this.num = parseInt (this.xnum); this.$refs ["num"]. Style.left = this.X + 6 + "px" / / Let the intersecting of the balls not affect / / dynamically monitor the left and right for (var I = 0; I < this.child.length; iTunes +) {if (this.childi [I] .classList.classroom ("ball")) {/ / A total of 5 elements minus 3 is the position of the blue line length let Len = this.child.length-3 If (I = = Len) {/ / the width of the line this.dis = Math.abs (this.child[ I] .offsetLeft-this.child [I + 1] .offsetLeft); / / the width of the ball this.child [1] .style.width = this.dis + "px" / if the value of the left ball minus the left of the right ball is less than 0, the left of the blue line is the offsetLeft value if of the left ball (this.childI] .offsetLeft-this.child [I + 1] .offsetLeft < 0) {this.child [1] .style.left = this.childI [I] .offsetLeft + "px" } else {/ / otherwise, the offsetLeft value of the right ball this.child [1] .style.left = this.child [I + 1] .offsetLeft + "px";} this.oDiv.style.left = this.X + "px";}, FnEnd () {_ document.ontouchmove = null _ document.ontouchend = null;},},}
CSS Code:
Box {position: relative; width: 400px; height: 30px; background-color: rgb (240,16,83); top: 50px; margin: auto; .ball {position: absolute; width: 30px; height: 30px; background-color: pink; border-radius: 50%; z-index: 2;} .ball.ac {right: 0; background-color: purple;} .Line {position: absolute; top: 14px Width: 400px; height: 2px; line-height: 30px; background: # ccc;}. Slider-Line {position: absolute; top: 14px; width: 400px; height: 2px; line-height: 30px; background-color: blue;} .num {position: absolute; top:-19px; left: 9px }} Thank you for your reading, the above is the content of "how to achieve the ball sliding crossover effect in vue". After the study of this article, I believe you have a deeper understanding of how to achieve the ball sliding crossover effect in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
