一款基于jquery的鼠标经过图片列表特效

今天要给大家推荐一款基于jquery的鼠标经过图片列表特效。当鼠标经过列表图片的时候，图片放大，且有一个半透明的遮罩层随之移动。效果图如下：



在线预览 源码下载

实现的代码

html代码：

<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>

css代码：

@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;
}

js代码：

//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;
}
};
}

注：本文爱编程原创文章，转载请注明原文地址：/article/1211603.html