苹果菜单 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            img{
                width:100px;
                height: 100px;
            }
            #div1{
                position: absolute;
                width: 100%;
                bottom: 20px;
                /*注意此处的bottom的值不能是0，否则会有抖动现象*/  
                height: auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <img src="img/3.jpg"/>
            <img src="img/4.jpg"/>
            <img src="img/5.jpg"/>
            <img src="img/6.jpg"/>
            <img src="img/7.jpg"/>
            <img src="img/8.jpg"/>
        </div>
    </body>
    <script>
        var oDiv = document.getElementById('div1');
        var aImage = document.getElementsByTagName('img');
        document.onmousemove = function(ev){
            var event = ev || window.event;
            for(var i=0;i<aImage.length;i++){
                var x = aImage[i].offsetLeft +aImage[i].offsetWidth/2;
                var y = aImage[i].offsetTop +aImage[i].offsetHeight/2+oDiv.offsetTop;
                
                var a = event.clientX - x;
                var b = event.clientY - y;
                
                var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
                
                var scale = 1.5-c/300;
                if(scale<0.5){
                    scale = 0.5;
                }
                aImage[i].style.width = scale*200+'px';
                aImage[i].style.height = scale*200+'px';
            }
        }
    </script>
</html>

 

posted @ 2017-12-30 22:35  阿弥陀佛么么哒！  阅读(167)  评论(0)  编辑  收藏  举报