添加控制點擊panel以外的地方panel隱藏，在點擊panel里面子元素則不作操作的功能：

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

<script type="text/javascript">

? ? ? ? var isOut = true; //保存鼠標(biāo)是否在div中這個狀態(tài)(默認(rèn)不在區(qū)域中)

? ? ? ? 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>