苹果菜单

    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    

    

    

        body {

            margin: 0px;

        }

        #div1 {

            text-align: center;

            position: absolute;

            bottom: 0px;

            width: 800px;

            margin: 0 auto;

        }

        #div1 img {

            border: none;

        }

        #div1 .box {

            display: block;

            width: 400px;

            margin: 0 auto;

            border-bottom: dotted 1px black;

            text-decoration: none;

            color: #333;

        }

        #div1 .box:hover {

            border-bottom: solid 1px black;

        }

    

    

        window.onload = function () {

            document.onmousemove = function (eve) {

                var oEvent = eve || event;

                var oDiv = document.getElementById('div1');

                var aImg = oDiv.getElementsByTagName('img');

                for (var i = 0; i < aImg.length; i++) {

                    var x = aImg[i].offsetLeft + aImg[i].offsetWidth / 2;

                    var y = aImg[i].offsetTop + oDiv.offsetTop + aImg[i].offsetHeight / 2;

                    var a = x - oEvent.clientX;

                    var b = y - oEvent.clientY;

                    var dis = Math.sqrt(a * a + b * b);

                    var ratio = 1 - dis / 500;

                    if (ratio < 0.5) {

                        ratio = 0.5;

                    }

                    aImg[i].style.width = ratio * 128 + 'px';

                }

            }

        }