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)

相关推荐

  • 归并算法

    技术归并算法 归并算法归并算法采用了分而治之的思想,具体的内容懂的都懂,不懂的也不需要明白,看代码就完事了。
    public class guibing { public static int[]

    礼包 2021年12月9日
  • 如何用MYSQL或者ORACLE的方法管理 POSTGRESQL

    技术如何用MYSQL或者ORACLE的方法管理 POSTGRESQL这期内容当中小编将会给大家带来有关如何用MYSQL或者ORACLE的方法管理 POSTGRESQL ,文章内容丰富且以专业的角度为大家分析和叙述,阅读

    攻略 2021年10月25日
  • 连接Kibana报错:Kibana server is not ready yet

    技术连接Kibana报错:Kibana server is not ready yet 连接Kibana报错:Kibana server is not ready yet问题描述
    浏览器连接Kibana

    礼包 2021年11月29日
  • OO题目集4~6总结

    技术OO题目集4~6总结 OO题目集4~6总结前言:
    第四次作业:
    本次作业首次运用继承方法和正则表达式,正则表达式第一次接触就是在水文数据校验及管理,对于我来说有一点难度。以下为关于正则表达式和继承的

    礼包 2021年11月13日
  • 抖音刷点赞多少钱,抖音一个赞多少钱

    技术抖音刷点赞多少钱,抖音一个赞多少钱抖音刷点赞多少钱,抖音一个赞多少钱
    拍摄设备也很关键,因为视频的质量也决定了抖音是否推送,建议选择像素较高的手机或者专业相机和相关设备。
    这些目前是抖音上比较热门的内容,各位小伙伴

    测评 2021年11月13日
  • Maven:解决IDEA无法下载源码

    技术Maven:解决IDEA无法下载源码 Maven:解决IDEA无法下载源码通过点击进IDEA反编译的代码文件处下载源代码Sources。IDEA提示报错,无法下载源代码。解决办法:
    mvn depe

    礼包 2021年11月22日