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

程序员文章站 2022-07-12 20:55:21

...

1.代码演示

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            #wrap{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                text-align: center;
            }
            #wrap > img{
                width: 64px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <img src="images/1.png"/>
            <img src="images/2.png"/>
            <img src="images/3.png"/>
            <img src="images/4.png"/>
            <img src="images/5.png"/>
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var r = 320;
            var imgNodes = document.querySelectorAll("#wrap > img");
            
            document.onmousemove=function(ev){
                ev =  ev||event;
                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].offsetHeight/2 - ev.clientY;
                    var c = Math.sqrt(a*a+b*b);
                    
                    
                    if(c>=r){
                        c=r;
                    }
                    imgNodes[i].style.width =128 - c*0.2 +"px";
                }
            }
        }
        
        
    </script>
</html>

效果图如下：

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