添加控制点击panel以外的地方panel隐藏，在点击panel里面子元素则不作操作的功能：

js代码如下，其他html、css代码相同：

<script type="text/javascript">

        var isOut = true; //保存鼠标是否在div中这个状态(默认不在区域中)

        var $btn = $('#face-btn'),

            $panel = $('.panel'),

            imgs = [];

        for (var i = 0; i < 14; i++) {

            imgs[i] = 'face/qq/' + i + '.gif';

        };

        var len = imgs.length;

        $btn.on("click", function (e) {

            e.stopPropagation();

            $panel.show();

            $.preload(imgs, {

                all: function () {

                    var html = '';

                    html += '<ul class="list" onmouseover="isOut=false" onmouseout="isOut=true">';

                    for (var i = 0; i < len; i++) {

                        html += '<li><img src="' + imgs[i] + '" alt=""/></li>';

                    };

                    html += '</ul>';

                    $panel.html(html);

                }

            })

        });

        $(document).bind('click', function () {

            if (isOut) {

                $panel.hide();

            };

        })

        </script>