代码改变世界

js简单仿苹果菜单图片效果

2012-07-05 23:04  VVG  阅读(713)  评论(0)  编辑  收藏  举报

DEMO演示：

点我点我点我

思路：通过计算鼠标与图片的位置来设定图片的大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>仿苹果菜单</title>
    <style type="text/css">
        #menu li{float:left; list-style: none; margin-left: 5px;}
        #menu{ display: inline-block;}
        body{ text-align: center;}
    </style>
</head>
<body>
<ul id="menu">
    <li><img src="images/01.png" alt="" width="100" height="100"></li>
    <li><img src="images/02.png" alt="" width="100" height="100"></li>
    <li><img src="images/03.png" alt="" width="100" height="100"></li>
    <li><img src="images/04.png" alt="" width="100" height="100"></li>
    <li><img src="images/05.png" alt="" width="100" height="100"></li>
    <li><img src="images/06.png" alt="" width="100" height="100"></li>
    <li><img src="images/07.png" alt="" width="100" height="100"></li>
    <li><img src="images/08.png" alt="" width="100" height="100"></li>
    <li><img src="images/09.png" alt="" width="100" height="100"></li>
</ul>
<script type="text/javascript">
    Tool = {
        $:function(selector,context){
            var elements,returnEle = [];
            var context = context || document;
            var sub = selector.substring(1);
            if (typeof(selector) == 'string'){
                switch(selector.charAt(0)) {
                    case '#':
                        return document.getElementById(sub);
                    case '.':
                        if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                        elements = context.getElementsByTagName('*');
                        for(var i= 0,n=elements.length;i<n;i++){
                            if(elements[i].className.indexOf(sub)>-1){
                                returnEle.push(elements[i]);
                            }
                        }
                        return returnEle;
                    default:
                        return context.getElementsByTagName(selector);
                }
            }
        },
        on:function(node, type, handler) {
            node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
        }
    };

    // 获取节点的中心点坐标位置
    function getCenterPos(ele){
        var x = ele.offsetLeft, y = ele.offsetTop;
        var width = ele.offsetWidth, height = ele.offsetHeight;
        while(ele.offsetParent){
            ele = ele.offsetParent;
            x += ele.offsetLeft;
            y += ele.offsetTop;
        }

        x = x + width/2;
        y = y + height/2;

        return [x,y];
    }

    // 在每个li节点中记录自己的位置
    function appleMenu(id){
        var ul = document.getElementById(id);
        var lis = ul.getElementsByTagName('li');
        for(var i= 0,n=lis.length;i<n;i++){
            lis[i].pos = getCenterPos(lis[i]);
        }
        return lis;
    }

    // 设置事件
    Tool.on(document,'mousemove', function(event){
        // 获取鼠标的x，y位置
        var pageX = event.pageX;
        var pageY = event.pageY;
        var dis;
        var lis = appleMenu('menu');
        for(var i = 0,n = lis.length; i < n; i++){
            // 计算鼠标与节点的距离
            dis = Math.sqrt(Math.pow(pageX - lis[i].pos[0],2) + Math.pow(pageY-lis[i].pos[1],2));
            // 根据鼠标与节点的距离来计算图片的宽高
            if(dis<=200){
                // 图片大小与鼠标距离的关系可以用二次函数（抛物线）来表示，鼠标在图片中心的时候图片最大（即dis为0的时候图片最大）
                // 我们设置最大值为200，那么抛物线经过（0，200）这个点，然后鼠标移动距离越远，图片大小越小，可以自己设定
                // 距离为多大的时候，图片恢复默认大小，比如设置为200，则抛物线经过（200,100）这个点，这样就可以求出
                // y = ax^2 + bx 中的a 和 b 的值，详情见此贴http://www.cnblogs.com/NNUF/archive/2012/05/28/2522541.html
                // 即求出图片大小鼠标位置的关系的公式即可
                Tool.$('img',lis[i])[0].height = Tool.$('img',lis[i])[0].width = 200 - 0.002*Math.pow(dis,2);
            }else{
                // 恢复默认大小
                Tool.$('img',lis[i])[0].height = Tool.$('img',lis[i])[0].width = 100;
            }
        }
    })

</script>
</body>
</html>