一款基于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;
        }
    };
}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10925