怎么用JS写一个拖拽调节透明度的进度条
Admin 2022-06-24 群英技术资讯 788 次浏览
今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下:
以下是代码实现,欢迎大家复制粘贴。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #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; } </style> <script> 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; //计算鼠标相对滑块上的位置 var disX = oEvent.clientX - oDiv.offsetLeft; document.onmousemove = function (ev) { var oEvent = ev || event; //计算滑块的动态left值 var l = oEvent.clientX - disX; //限制拖拽范围 if (l < 0) { l = 0; } else if (l > oParent.offsetWidth - oDiv.offsetWidth) { l = oParent.offsetWidth - oDiv.offsetWidth; } oDiv.style.left = l + 'px'; //计算拖拽移动距离与可拖动总范围的比例 var scale = l / (oParent.offsetWidth - oDiv.offsetWidth); //让Div2跟随鼠标的拖动逐渐显示与隐藏 oDiv2.style.filter = 'alpha(opacity:' + 100 * scale + ')'; oDiv2.style.opacity = scale; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; }; }; </script> </head> <body> <div id="parent"> <div id="div1"></div> </div> <div id="div2"></div> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章介绍了我在开发过程中发现的一个小问题,就是node.js如何能够根据不同的请求路径来返回得到不同数据,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下
这篇文章给大家分享的是React请求远程数据的相关内容,React中请求远程数据的方式有四种,具体怎样实现呢?文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
这篇文章给大家分享的是jQuery实现select不可编辑但可传值的方法。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
这篇文章给大家分享的是vue如何实现文件的上传下载功能,这里会使用到的技术除了vue,还有axios、springboot。实现思路及代码如下,文中示例代码介绍的非常详细,感兴趣的朋友接下来一起跟随小编看看吧。
JavaScript 的 switch 有四样写法,你知道么?不管你知道不知道,反正我是不知道。我所知道的 JavaScript 的 switch 语句只有一种写法。但要说到对分支的处理,...
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008