jquery 图片飞出页面效果插件

花了点时间写了个图片飞出页面效果的插件，在父容器中可以有多张图片，插件会将它们以一定的错位层叠地放置，点击最顶部的图片，图片可以按照设定的方式飞出页面，后面的图片会移动到容器顶部，可以继续点击。

基于jquery开发，所以要引用jquery库

插件imgPlugin.js  代码如下：

(function ($) {

    $.fn.imgPlugin = function (options) {
        var ps = $.extend({
            contianer: $(document.body),
            conWidth: 200,  //容器宽度
            conHeight: 200,    //容器高度
            sonMarginLeft: 10,  //子元素左外边距
            sonMarginTop: 10,   //子元素上外边距
            sonWidth: 100,   //子元素宽度
            sonHeight: 100,  //子元素高度
            sonCount: 16,  //显示的元素数目
            flyTime: 300,    //元素飞出页面的时间
            sonMoveTime: 500, //元素位移的时间
            flyDirection: "default" //设置元素飞出的方向 值：default（元素从左上角飞出页面）、left(元素向左飞出页面)、top(向上飞出页面)
        }, options);

        var father = (typeof ps.contianer == "string" ? $(ps.contianer) : $(this));
        father.css({ "width": ps.conWidth, "height": ps.conHeight, "position": "relative", "padding": "0", "over-flow": "hidden" });

        var imgCount = ps.sonCount;
        var imgWidth = ps.sonWidth;
        var imgHeight = ps.sonHeight;
        var imgMarginTop = ps.sonMarginTop;
        var imgMarginLeft = ps.sonMarginLeft;
        var sons = father.find("img");
        var direction = ps.flyDirection;

        if (sons.length < imgCount) {
            alert("设置显示的图片数大于实际存在的图片数");
            return;
        }

        function fly(img) {
            var sonTop = $(img).offset().top + $(img).outerHeight();
            var sonLeft = $(img).offset().left + $(img).outerWidth();
            var browserWidth = window.document.body.clientWidth;
            var browserHeight = window.document.body.clientHeight;
            var delayTime = "";
            switch (direction) {
                case "default":
                    $(img).animate({ top: '-=' + sonTop, left: '-=' + sonLeft }, ps.flyTime);
                    delayTime = imgHeight / sonTop * ps.flyTime;
                    break;
                case "top":
                    $(img).animate({ top: '-=' + sonTop }, ps.flyTime);
                    delayTime = imgHeight / sonTop * ps.flyTime;
                    break;
                case "left":
                    $(img).animate({ left: '-=' + sonLeft }, ps.flyTime);
                    delayTime = imgWidth / sonLeft * ps.flyTime;
                    break;
                default:
                    delayTime = 1000;
            }
            return delayTime;
        }

        function imgFly(img) {
            $(img).bind('click', function () {
                var lastSon = father.find("img:last");
                var nextSilbings = $(img).nextAll();
                //获取图片在容器中的样式改变的延时
                var delayMoveTine = fly(img);

                //复制当前元素并设置属性添加到父元素最后
                $(img).clone().css({ "z-index": "0", "display": "none", "margin-top": imgMarginTop * (imgCount - 1), "margin-left": imgMarginLeft * (imgCount - 1) }).insertAfter(lastSon);

                //递归 给下个元素绑定事件
                $(img).next().bind('click', imgFly($(img).next()));

                setTimeout(
                    function () {
                        for (var i = 0; i < imgCount; i++) {
                            if (i < imgCount - 1) {
                                $(nextSilbings[i]).css("z-index", (imgCount - i - 1));
                                $(nextSilbings[i]).animate({ "margin-top": "-=" + ps.sonMarginTop, "margin-left": "-=" + ps.sonMarginLeft }, ps.sonMoveTime);
                            }
                            else {
                                $(nextSilbings[i]).css({ "z-index": "0", "display": "block", "position": "absolute", "margin-top": imgMarginTop * (imgCount - 1), "margin-left": imgMarginLeft * (imgCount - 1) });
                            }
                        }
                    }
                    , delayMoveTine
                );


            });
        }

        sons.each(
            function (e) {
                $(this).css({ "position": "absolute", "width": imgWidth, "height": imgHeight });
                if (e == 0) {
                    imgFly(this);
                }
                if (e < imgCount) {
                    $(this).css({ "z-index": imgCount - e, "margin-top": imgMarginTop * e, "margin-left": imgMarginLeft * e, "display": "block" });
                }
                else {
                    $(this).css({ "display": "none", "margin-top": imgMarginTop * e, "margin-left": imgMarginLeft * e });
                }

            }
        )


    }

})(jQuery)

 页面使用代码：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script language="javascript" src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script language="javascript" src="js/imgPlugin.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(document).ready(

            function () {
                $("#father").imgPlugin({
                    sonCount: 4
                })
            }
        )
    </script>
</head>
<body>
<div id="father" style="width:200px; height:200px; margin-top:300px;border:1px solid #000; margin-left:400px;">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/5.jpg" />
    <img src="img/6.jpg" />
    <img src="img/7.jpg" />
    <img src="img/8.jpg" />
    <img src="img/9.jpg" />
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/sidihu/archive/2012/04/27/2474223.html