苹果底部菜单栏动画实现_macos底部动画怎么打开

作者：天景科技苑 | 2024-07-01 20:42:18

踩

macos底部动画怎么打开


<style>
    * {
        margin: 0 auto;
        padding: 0;
    }
 
    div {
        width: 800px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
 
    div img {
        width: 60px;
        margin: 0 10px;
    }
</style>
 
<body>
    <div>
        <img src="img/6.png" alt="">
        <img src="img/7.png" alt="">
        <img src="img/8.png" alt="">
        <img src="img/9.png" alt="">
    </div>
 
    <script>
        var div = document.querySelector('div');
        var imgs = div.querySelectorAll('img');
 
 
        window.onmousemove = function () {
            var evt = event || window.event;
            // console.log(evt.clientY + ',' + gougu(evt, imgs[0]));
            for (var i = 0; i < imgs.length; i++) {
                if (gougu(evt, imgs[i]) <= 200) {
                    imgs[i].style.width = Math.min(200, 260 - gougu(evt, imgs[i])) + 'px';
                } else {
                    imgs[i].style.width = 60 + 'px';
                }
 
            }
 
        }
 
        function gougu (evt, img) {
            var a = img.offsetLeft + div.offsetLeft + img.clientWidth / 2 - evt.clientX;
            var b = img.offsetTop + div.offsetTop + img.clientWidth / 2 - evt.clientY;
            var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
            return c;
        }
    </script>
</body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/777625