模仿万智牌卡牌效果

css

var Cards = (function () {            var _fun = {                bindHover: function (o, z_indexMax) {                    o.hover(function () {                        var _o = $(this);                        var i = z_indexMax;                        var j = 0;                        _o.stop();                        _o.animate({ "height": "150px" }, 500)                        while (i--) {                            if (i > _o.index()) {                                o.eq(i).css("z-index", j);                            } else if (i < _o.index()) {                                o.eq(i).css("z-index", _o.index() - j);                            }                            else {                                o.eq(i).css("z-index", z_indexMax);                            }                            j++;                        }                    }, function () {                        var _o = $(this);                        _o.stop();                        _o.animate({ "width": "220px", "height": "99px" }, 200)                    })                },                init: function (containerKey) {                    var fun = _fun,                    obj = $(containerKey),                    li = obj.find("li");                    li.css({ "position": "absolute", "width": "220px", "height": "99px", "overflow": "hidden", "border": "1px solid red" });                    var i = 0;                    li.each(function () {                        var _o = $(this);                        _o.css({ "margin-left": i * 20 + "px", "z-index": i });                        i++;                    })                    fun.bindHover(li, i--);                }            }            return {                Init: _fun.init            }        })()        Cards.Init("#div_Container");