Shulou(Shulou.com)06/03 Report--

In order to solve the problem of how to drag and drop the progress bar to change the transparency of elements in JS, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a simpler and easier way.

What we want to share today is to use native JS to drag and drop the progress bar to change the transparency of elements. The results are as follows:

The following is the code implementation, you are welcome to copy and paste.

Native JS drag progress bar to change element transparency # parent {width: 400px; height: 20px; background: # CCC; position: relative; margin: 20px auto;} # div1 {width: 20px; height: 20px; background: red; cursor: pointer Position: absolute;} # div2 {width: 300px; height: 300px; margin: 0 auto; filter: alpha (opacity:0); opacity:0; background: yellow;} _ window.onload = function () {var oDiv = document.getElementById ('div1') Var oParent = document.getElementById ('parent'); var oDiv2 = document.getElementById (' div2'); oDiv.onmousedown = function (ev) {var oEvent = ev | | event; / / calculate the position on the mouse relative slider var disX = oEvent.clientX-oDiv.offsetLeft _ document.onmousemove = function (ev) {var oEvent = ev | | event; / / calculate the dynamic left value of the slider var l = oEvent.clientX-disX; / / limit the drag range if (l

OParent.offsetWidth-oDiv.offsetWidth) {l = oParent.offsetWidth-oDiv.offsetWidth;} oDiv.style.left = l + 'px'; / / calculate the ratio of the dragging distance to the total draggable range var scale = l / (draggable-oDiv.offsetWidth) / / Let Div2 follow the mouse drag to gradually show and hide oDiv2.style.filter = 'alpha (opacity:' + 100 * scale +')'; oDiv2.style.opacity = scale;}; _ document.onmouseup = function () {_ document.onmousemove = null _ document.onmouseup = null;} This is the answer to the question about how JS can drag and drop the progress bar to change the transparency of elements. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.