zoukankan html css js c++ java

仿苹果菜单栏的效果

body{
        margin:0;
        padding:0
    }
    #menu{

        position:absolute;
        width:100%;
        bottom:0;
        text-align:center;
    }

window.onload = function ()
    {
        var oMenu = document.getElementById("menu");
        var aImg = oMenu.getElementsByTagName("img");
        var aWidth = [];
        var i = 0;
        //保存原宽度, 并设置当前宽度
        for (i = 0; i < aImg.length; i++)
        {
            aWidth.push(aImg[i].offsetWidth);
            aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
        }
        //鼠标移动事件
        document.onmousemove = function (event)
        {
            var event = event || window.event;
            for (i = 0; i < aImg.length; i++)
            {
                var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
                var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
                var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
                if (iScale < 0.5) iScale = 0.5;
                aImg[i].width = aWidth[i] * iScale
            }
        };
    };

<body>
<div id="menu">
    <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" />
    <img src="img/6.png" />
    <img src="img/7.png" />
    <img src="img/8.png" />
</div>

</body>

查看全文

相关阅读:
Day10
Day9
Day8
Day7
Day 6
Day5
第一周计划
 事件总线模式辨析
 解释器模式辨析
 解释器模式深度探究

原文地址：https://www.cnblogs.com/sunkunqi/p/4829951.html