天天看點

基于jQuery實作蘋果Dock樣式的菜單

愛程式設計小編之前我們分享過相當數量的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.οnlοad=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:/Article/19605

繼續閱讀