基於jQuery實現蘋果Dock樣式的菜單

標籤：

愛編程小編之前我們分享過相當數量的jQuery菜單了，今天要給大家帶來一款Dock樣式的jQuery菜單，用過蘋果的朋友都知道，它的Dock菜單非常酷，配合漂亮的表徵圖就更加絢麗了。如下：

線上預覽   源碼下載

實現的代碼。

html代碼：

<div id="wrapper">    <img src="images/1.png" width="64">    <img src="images/2.png" width="64">    <img src="images/3.png" width="64">    <img src="images/4.png" width="64">    <img src="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;               }           }        }

via：http://www.w2bc.com/Article/19605

基於jQuery實現蘋果Dock樣式的菜單