JS如何实现拖拽进度条改变元素透明度

技术JS如何实现拖拽进度条改变元素透明度JS如何实现拖拽进度条改变元素透明度,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。今天要分享的是运用原生JS拖拽

如何通过拖动JS中的进度条来改变元素的透明度?针对这个问题,本文详细介绍了相应的分析和解决方法,希望能帮助更多想要解决这个问题的小伙伴找到更简单易行的方法。

今天我想分享的是用原生JS拖拽进度条来改变元素的透明度。效果如下:

JS如何实现拖拽进度条改变元素透明度

下面是代码实现。请复制粘贴。

!DOCTYPEhtml

超文本标记语言

meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 /

标题本地JS拖放进度条以更改元素透明度/标题。

风格

#家长{

宽度width:400px

高度:20 px;

背景# CCC

位置:相对;

margin:20pxauto

}

#div1{

宽度:20 px;

高度:20 px;

背景:红色;

cursor:pointer指针;

位置:绝对;

}

#div2{

宽度width:300px

高度:300 px;

margin:0auto

filter : alpha(opa city 33600);

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>

关于JS如何实现拖拽进度条改变元素透明度问题的解答就分享到这里了,希望

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/37095.html

(0)

相关推荐

  • Android自定义View实现体重表盘的方法是什么

    技术Android自定义View实现体重表盘的方法是什么本篇内容介绍了“Android自定义View实现体重表盘的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如

    攻略 2021年11月1日
  • MySQL中pt-duplicate-key-checker工具怎么用

    技术MySQL中pt-duplicate-key-checker工具怎么用这篇文章主要为大家展示了“MySQL中pt-duplicate-key-checker工具怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑

    攻略 2021年11月2日
  • Apache Hudi使用是怎么样的

    技术Apache Hudi使用是怎么样的Apache Hudi使用是怎么样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。]数据实时处理和实时的数据实时分为

    攻略 2021年11月23日
  • 如何理解Java MeteoInfo解析与绘图代码教程

    技术如何理解Java MeteoInfo解析与绘图代码教程这篇文章主要讲解了“如何理解Java MeteoInfo解析与绘图代码教程”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究

    攻略 2021年10月21日
  • 20212322《网空导论》第十周学习总结

    技术20212322《网空导论》第十周学习总结 20212322《网空导论》第十周学习总结3.1 网络安全概述
    网络安全范畴极其广泛,可以说是涉及多方面。
    3.1.1 网络安全现状及安全挑战
    因为计算机

    礼包 2021年12月5日
  • 如何深入分析Tomcat的Manager

    技术如何深入分析Tomcat的Manager如何深入分析Tomcat的Manager,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。关心Tom

    攻略 2021年12月8日