仿Linux停靠栏前端

程序员文章站 2022-03-15 12:57:18
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    /*清除默认样式*/
    *{
        margin: 0px;
        padding: 0px;
    }
    html, body{
        height: 100%;
        overflow: hidden;
    }


    #wrap > img{
        width: 64px;
    }
    #wrap{
        position: absolute;/*默认宽度100%，此时是元素大小*/
        bottom: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        /*可以用font-size消除图片间的间隙*/
    }
</style>
<script>
    window.onload = function () {
        var r = 320;
        var imgNodes = document.querySelectorAll('#wrap > img');
        document.onmousemove = function (ev) {
            ev = ev||event;
            //console.log(ev.clientX);
            console.log(ev.clientY);
            for (var i=0; i<imgNodes.length; i++){
                //图片到边界的距离-鼠标到边界的距离
                var a = imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX;
                var b = imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetTop/2 - ev.clientY;
                var c = Math.sqrt(a*a+b*b);

                if(c>=r){c = r;}
                //图片的宽度 c越小图片越大，
                imgNodes[i].style.width = 128 - c*0.2 + 'px';
            }
        }
    }
</script>
<body>

    <div id="wrap">
        <img src="img/1.png">
        <img src="img/2.png">
        <img src="img/3.png">
        <img src="img/4.png">
        <img src="img/5.png">
    </div>

</body>

</html>
仿Linux停靠栏前端

前端实现mac笔记本停靠栏效果

仿Linux停靠栏前端
