html模仿苹果电脑任务栏菜单

效果很炫，滑动超流畅！

完整源码：http://yuncode.net/code/c_5055d5cc4879382

保存为html即可

 

 

 

核心代码：

<script type="text/javascript">  

19 window.onload = function ()  

20 {  

21     var oMenu = document.getElementById("menu");  

22     var aImg = oMenu.getElementsByTagName("img");  

23     var aWidth = [];  

24     var i = 0;  

25     //保存原宽度, 并设置当前宽度  

26     for (i = 0; i < aImg.length; i++)  

27     {  

28         aWidth.push(aImg[i].offsetWidth);  

29         aImg[i].width = parseInt(aImg[i].offsetWidth / 2);  

30     }  

31     //鼠标移动事件  

32     document.onmousemove = function (event)  

33     {  

34         var event = event || window.event;  

35         for (i = 0; i < aImg.length; i++)  

36         {  

37             var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;  

38             var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;  

39             var iScale = 1 - Math.sqrt(a * a + b * b) / 300;  

40             if (iScale < 0.5) iScale = 0.5;  

41             aImg[i].width = aWidth[i] * iScale  

42         }  

43     };  

44 };  

45 </script>