基于jQuery实现苹果Dock样式的菜单

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

爱编程小编之前我们分享过相当数量的jQuery菜单了，今天要给大家带来一款Dock样式的jQuery菜单，用过苹果的朋友都知道，它的Dock菜单非常酷，配合漂亮的图标就更加绚丽了。效果图如下：

在线预览源码下载

实现的代码。

html代码：

<div id="wrapper">

    <img src="data:images/1.png" width="64">

    <img src="data:images/2.png" width="64">

    <img src="data:images/3.png" width="64">

    <img src="data:images/4.png" width="64">

    <img src="data:images/5.png" width="64">

</div>

js代码：

 window.onload=function(){

           document.onmousemove=function(ev){

               var oevent=ev||event;

               var aimg=document.getElementsByTagName('img');

               var odiv=document.getElementById('wrapper');

               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=parseInt(Math.sqrt(a*a+b*b));

                      var scale=1-dis/200;

                    if(scale<0.5){

                        scale=0.5;

                    }

                    aimg[i].width=scale*128;

               }

           }

        }