其他分享
首页 > 其他分享> > mac停靠栏动画

mac停靠栏动画

作者：互联网

MAC停靠栏

GIF

<!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>
        <script type="text/javascript">
            window.onload=function(){
                var r=128;
                var imgNodes=document.querySelectorAll("#wrap > img");
                
                document.onmousemove=function(ev){
                    ev=ev ||event;
                    // alert(12);
                    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.5 +"px";
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <dic id="wrap">
            <img src="images/1.png" alt="">
            <img src="images/2.png" alt="">
            <img src="images/3.png" alt="">
            <img src="images/4.png" alt="">
            <img src="images/5.png" alt="">
        </dic>
        
    </body>
</html>

标签：function,动画,img,var,width,mac,停靠,wrap,ev
来源： https://www.cnblogs.com/SSPOFA/p/12109829.html