鱼眼菜单Demo

模仿做了个菜单截图：

 

 html：

 

View Code
 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7         #container{ position:fixed; bottom:0; width:100%; text-align:center;}
 8         #container img{ width:100px; height:100px; cursor:pointer;}
 9     </style>
10 </head>
11 <body>
12     <div id="container">
13         <img src="31.png" alt="图标"/>
14         <img src="33.png" alt="图标"/>
15         <img src="35.png" alt="图标"/>
16         <img src="37.png" alt="图标"/>
17     </div>
18     <script src="util.js" type="text/javascript"></script>
19     <script type="text/javascript">
20         var obj = new util();
21     </script>
22 </body>
23 </html>

 js：

View Code
 1 function util() {
 2     this.distance = 350; //鼠标到圆心距离
 3     this.imgMaxWidth = 200;
 4     this.imgMaxHeight = 200;
 5     this.init();
 6 }
 7 util.prototype = {
 8     init: function () {
 9         var boxObj = document.getElementById('container');
10         var imgList = boxObj.getElementsByTagName('img');
11         var _this = this;
12         
13         document.onmousemove = function (ev) {
14             var ev = ev || window.event;
15             for (var i = 0; i < imgList.length; i++) {
16                 var a = ev.clientX - (imgList[i].offsetLeft + imgList[i].offsetWidth / 2);
17                 var b = ev.clientY - (imgList[i].offsetTop + imgList[i].offsetHeight / 2 + boxObj.offsetTop);
18                 var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
19                 var spex = 1 - c / _this.distance;
20                 if (spex < 0.5) {
21                     spex = 0.5;
22                 }
23                 imgList[i].style.width = spex * (_this.imgMaxWidth) + 'px';
24                 imgList[i].style.height = spex * (_this.imgMaxHeight) + 'px';
25             }
26         }
27     }
28 }

 

/Files/MasterHeng/Menu.zip 

 

posted @ 2011-12-01 15:10  StrongWorld  阅读(851)  评论(1)    收藏  举报