jquery 鼠标经过图片放大特效代码

<h1>Direction Aware Hover</h1> 
<div class="container cf"> 
<div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image1.jpg"><div class="overlay"></div></div><div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image2.jpg"><div class="overlay"></div></div><div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image3.jpg"><div class="overlay"></div></div><div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image4.jpg"><div class="overlay"></div></div><div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image5.jpg"><div class="overlay"></div></div><div class="boxes"><img class="da-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/24345/da_image6.jpg"><div class="overlay"></div></div></div> 

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300); 
h1{ 
  font-family: 'Roboto Condensed', sans-serif; 
  text-align: center; 
} 
.cf:before, 
.cf:after { 
content: " "; /* 1 */ 
display: table; /* 2 */ 
} 
 
.cf:after { 
clear: both; 
} 
 
/** 
 * For IE 6/7 only 
 * include this rule to trigger hasLayout and contain floats. 
 */ 
.cf { 
*zoom: 1; 
} 
 
.boxes{ 
display: block; 
width: 30%; 
height: 220px; 
background: #fe4; 
position: relative; 
overflow: hidden; 
float: left; 
margin: 1.5%; 
cursor: pointer; 
} 
.da-image{ 
   min-height: 100%; 
   width: 100%; 
} 
.overlay{ 
display: block; 
position: absolute; 
width: 100%; 
height: 100%; 
top: 0%; 
left: -100%; 
color: #FFF; 
background-color: rgba(0,0,0,0.8); 
z-index: 10; 
} 
 
.container{ 
width: 1170px; 
display: block; 
margin: auto; 
} 

//Detect Closest Edge 
function closestEdge(x,y,w,h) { 
var topEdgeDist = distMetric(x,y,w/2,0); 
var bottomEdgeDist = distMetric(x,y,w/2,h); 
var leftEdgeDist = distMetric(x,y,0,h/2); 
var rightEdgeDist = distMetric(x,y,w,h/2); 
var min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist); 
switch (min) { 
case leftEdgeDist: 
return "left"; 
case rightEdgeDist: 
return "right"; 
case topEdgeDist: 
return "top"; 
case bottomEdgeDist: 
return "bottom"; 
} 
} 
 
//Distance Formula 
function distMetric(x,y,x2,y2) { 
var xDiff = x - x2; 
var yDiff = y - y2; 
return (xDiff * xDiff) + (yDiff * yDiff); 
} 
 
var boxes = document.querySelectorAll(".boxes"); 
for(var i = 0; i < boxes.length; i++){ 
boxes[i].onmouseenter = function(e){ 
var x = e.pageX - this.offsetLeft; 
var y = e.pageY - this.offsetTop; 
var edge = closestEdge(x,y,this.clientWidth, this.clientHeight); 
var overlay = this.childNodes[1]; 
var image = this.childNodes[0]; 
 
switch(edge){ 
case "left": 
//tween overlay from the left 
overlay.style.top = "0%"; 
overlay.style.left = "-100%"; 
TweenMax.to(overlay, .5, {left: '0%'}); 
TweenMax.to(image, .5, {scale: 1.2}); 
break; 
case "right": 
overlay.style.top = "0%"; 
overlay.style.left = "100%"; 
//tween overlay from the right 
TweenMax.to(overlay, .5, {left: '0%'}); 
TweenMax.to(image, .5, {scale: 1.2}); 
break; 
case "top": 
overlay.style.top = "-100%"; 
overlay.style.left = "0%"; 
//tween overlay from the right 
TweenMax.to(overlay, .5, {top: '0%'}); 
TweenMax.to(image, .5, {scale: 1.2}); 
break; 
case "bottom": 
overlay.style.top = "100%"; 
overlay.style.left = "0%"; 
//tween overlay from the right 
TweenMax.to(overlay, .5, {top: '0%'}); 
TweenMax.to(image, .5, {scale: 1.2}); 
break; 
} 
}; 
  
boxes[i].onmouseleave = function(e){ 
var x = e.pageX - this.offsetLeft; 
var y = e.pageY - this.offsetTop; 
var edge = closestEdge(x,y,this.clientWidth, this.clientHeight); 
var overlay = this.childNodes[1]; 
var image = this.childNodes[0]; 
 
switch(edge){ 
case "left": 
TweenMax.to(overlay, .5, {left: '-100%'}); 
TweenMax.to(image, .5, {scale: 1.0}); 
break; 
case "right": 
TweenMax.to(overlay, .5, {left: '100%'}); 
TweenMax.to(image, .5, {scale: 1.0}); 
break; 
case "top": 
TweenMax.to(overlay, .5, {top: '-100%'}); 
TweenMax.to(image, .5, {scale: 1.0}); 
break; 
case "bottom": 
TweenMax.to(overlay, .5, {top: '100%'}); 
TweenMax.to(image, .5, {scale: 1.0}); 
break; 
} 
}; 
}