鼠标悬停，图片向周四扩散

css文件

    .qitem {
            width:400px;
            height:400px;
            border:4px solid #222;
            margin:5px 5px 5px 0;
            /*background: url('../images/bg.gif') no-repeat;*/
            /* required to hide the image after resized */
            overflow:hidden;
            /* for child absolute position */
            position:relative;
            /* display div in line */
            float:left;
            cursor:hand;
            cursor:pointer;
        }
        .qitem img {
            border:0;
            /* allow javascript moves the img position*/
            position:absolute;
            z-index:200;
        }
        .qitem .caption {
            position:absolute;
            z-index:0;
            color:#ccc;
            display:block;
        }
        .qitem .caption h4 {
            font-size:12px;
            padding:10px 5px 0 8px;
            margin:0;
            color:#369ead;
        }
        .qitem .caption p {
            font-size:10px;
            padding:3px 5px 0 8px;
            margin:0;
        }

    //重要！！！
    .topLeft, .topRight, .bottomLeft, .bottomRight {
        position:absolute;
        background-repeat: no-repeat;
        float:left;
        border: 1px solid #000;
    }
    .topLeft {
        background-position: top left;
    }
    .topRight {
        background-position: top right;
    }
    .bottomLeft {
        background-position: bottom left;
    }
    .bottomRight {
        background-position: bottom right;
    }

html文件

    <div style="width:600px; height:700px; margin:0 auto;">
        <div class="qitem">
            <a href="#">
                <img src="images/s22.jpeg" alt="Test 1" title="" width="400px" >
            </a>
            <span class="caption">
                <h4>Night Club</h4>
                <p>哇呜</p>
            </span>
        </div>
    </div>

插件

jquery
jquery.easing.1.3.js

js代码

 //arrival的鼠标悬停特效
var style_in = "easeOutBounce";
var style_out = "jswing";
var speed_in = 1000;
var speed_out = 300;
var neg = Math.round($(".pro_item ol li").width()/2)*-1;
var height = Math.round($(".pro_item ol li").height()/2)*-1;
var pos = neg*(-1);
var out = pos*2;
var posH = height*(-1);
var outH = posH*2;
$(".pro_item ol li").each(function(){
    var img = $(this).find("img").attr("src");
    $("img",this).remove();
    $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
    $(this).children('div').css('background-image','url('+ img + ')');
    $(this).find("div.topLeft").css({top:0,left:0,width:pos,height:posH});
    $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:posH});
    $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:posH});
    $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:posH});

}).hover(function(){
    $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
    $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
    $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
    $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});


}, function () {
        $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
    }).click (function () {
    window.location = $(this).find('a').attr('href');
});