模仿万智牌卡牌效果

最新推荐文章于 2023-05-06 21:27:12 发布

柴逸宁

最新推荐文章于 2023-05-06 21:27:12 发布

阅读量3.7k

点赞数

分类专栏： Jquery 文章标签： function fun div border css

本文链接：https://blog.csdn.net/chaiyining007/article/details/7743612

版权

Jquery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

css

 #div_count
        {
            overflow: hidden;
        }
        div ul, li
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        img
        {
            width: 100%;
            height: 100%;
        }

布局

<div id="div_Container">
        <ul>
            <li>
                <img src="img/1.png" /></li>
            <li>
                <img src="img/2.png" /></li>
            <li>
                <img src="img/3.png" /></li>
            <li>
                <img src="img/4.png" /></li>
        </ul>
    </div>

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");