How to realize the effect of window display by JavaScript

This article will explain in detail how to achieve the window display effect of JavaScript. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Put up a shelf first

* {margin: 0; padding: 0;} .box {width: 800px; height: 190px; border: 1px solid # 000; margin: 100px auto;} ul {list-style: none; display: flex } ul img {vertical-align: top;} .progress {width: 100%; height: 30px; background: # ccc;} .progress > .line {width: 100px; height: 100%; background: orange Border-radius: 15px;}

two。 Logical part

Get the elements that need to be operated

Calculate the width of the ul

Set the width of the ul

Calculate the width of the scroll bar

Set the width of the scroll bar

Listen for mouse-pressed events

Get the current position of the scroll bar

Get the position where the mouse is pressed in the scroll bar

Monitor mouse movement events

Get the position after the mouse is moved in the scroll bar

Calculate offset

Safety check

Reset the position of the scroll bar

Calculate the scrolling distance of the picture

Reset the position of the picture

.box {overflow: hidden;} ul {position: relative;} .progress {position: relative;} .progress > .line {position: absolute; left: 0; top: 0;} / / 1. Get the elements const oUl = document.querySelector ("ul"); const oItems = oUl.querySelectorAll ("li"); const oProgress = document.querySelector (".progress"); const oLine = document.querySelector (".line"); const oBox = document.querySelector (".box"); / / 2. Calculate the width of ul const ulWidth = oItems [0] .offsetWidth * oItems.length; / / 3. Set the width of ul oUl.style.width = ulWidth + 'px'; / / 4. Calculate the width of the scroll bar / / the width of the scroll bar / the scroll range of the scroll bar = the width of the container / the range of the content const progressWidth = oProgress.offsetWidth;const boxWidth = oBox.offsetWidth;const lineWidth = boxWidth / ulWidth * progressWidth; / / 5. Set the width of the scroll bar oLine.style.width = lineWidth + 'px';// calculate the maximum scrolling range of the scroll bar const maxLineX = progressWidth-lineWidth;// calculate the maximum scrolling range of the picture const maxImgX = boxWidth-ulWidth; / / 6. Listen for the event oLine.onmousedown = function (e) {e = e | | window.e;//a. Get the current position of the scroll bar let begin = parseFloat (oLine.style.left) | | 0; / / b. Get the position where the mouse is pressed in the scroll bar let mouseX = e.pageX-oBox.offsetLeft; / / 7. Monitor the mouse movement event oLine.onmousemove = function (e) {e = e | | window.e;//c. Get the position after the mouse moves in the scroll bar let moveMouseX = e.pageX-oBox.offsetLeft; / / d. Calculate the offset let offsetX = moveMouseX-mouseX + begin; / / e. Security check offsetX = offsetX

< 0 ? 0 : offsetX;offsetX = offsetX >

MaxLineX? MaxLineX: offsetX; / / f. Reset the scroll bar position oLine.style.left = offsetX + 'px'; / / g. Calculate the scrolling distance of the picture / / the scrolling distance of the scroll bar / the maximum scrolling range of the scroll bar = the maximum scrolling distance of the picture / the maximum scrolling distance of the picture / / the maximum scrolling distance of the scroll bar / the maximum scrolling distance of the scroll bar * the maximum scrolling distance of the picture = the distance of the picture scrolling const imgOffsetX = offsetX / maxLineX * maxImgX; / / h. Reset the position of the picture oUl.style.left = imgOffsetX + "px";};}; _ document.onmouseup = function () {oLine.onmousemove = null;}

This is the end of the article on "how to achieve window display effect in JavaScript". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.