×

javascript:拖拽进度条改变模块透明度

作者:jiang2021.10.20来源:Web前端之家浏览:334评论:0
关键词:js

今天分享一个原生javascript小应用:拖拽进度条改变元素透明度。直接上DEMO。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript:拖拽进度条改变模块透明度 - Web前端之家www.jiangweishan.com</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"><p>欢迎来到Web前端之家!!!!</p></div>
</body>
 
</html>

试试吧!!

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20211020a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1