鱼眼菜单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 

 

转载于:https://www.cnblogs.com/MasterHeng/archive/2011/12/01/2270637.html