我們在QQ空間里面有一個送禮物的功能，顯示了最近過生日的人。我們只要把鼠標放到如下圖的生日快樂那標簽上，就會顯示可以給該人送的禮物??！
如下圖所示：
單擊其中的一個禮物，就會馬上送出去。但是我們現在是要說的還有單擊更多的時候，會另外彈出一個新的窗口在當前頁面最前面！如下圖顯示：
怎么實現那上面的功能呢？
就是把鼠標放上去，彈出一天tips，單擊tips里面的控件，之后彈出另外一個彈出框。
網上就會有很多比較好的插件，就先到網上去找了相對應的jquery插件。
jquery中tips的有很多插件，但是大部分都是跟隨鼠標走的，你離開那個指定的位置就會消失。現在這個是把鼠標是要可以放到彈出的tips上面的。之后發現了一款符合需求又很強大的tips插件poshytip。poshytip使用簡單，它還可以支持ajax來動態的加載內容來的，就可以通過數據庫來調用指定分類的禮物出來了。
更多的poshytip示例和演示在：http://vadikom.com/demos/poshytip/
還需要一個彈出層的，為了更容易的去實現，把彈出層另外新作了一個頁面，點擊更多的時候在當前窗口加載另外一個新的頁面作為彈出層。
彈出層的很多，用colorbox等其它jquery插件。直接只用使用之后，發現彈出來的窗口說鏈接錯誤！或者被取消彈出層等。那是因為我們在單擊了更多的時候，彈出了一個新的窗口，鼠標離開了tips彈出來的窗口，這時候那tips出來的就會消失，而彈出加載另外的頁面的被取消了。
那是要我自己來弄一個彈出層插件來了么，能寫當然好 。對于不是js告訴來，找一款比較簡單的來定制不是更快捷。這里//www.49028c.com/article/84902.htm比較秀珍的彈出層插件。使用和修改起來也非常方便了。
用poshytip的方法loadposhytip里面加載了內容后就給綁定給更多綁定popdialog方法。只要我們就可以實現那功能了。
實現的方式就是那樣的了，下面是我使用的部分js代碼
function loadRecommenClick() { if ($("#floatBoxBg").length == 0) { $(".moreRecommend").PopDialog({ Event: "click", //觸發響應事件 title: "送禮物", //彈出層的標題 content: "/peoplename/toPeople.aspx?typeId=", //彈出層的內容獲取(text文本、容器ID名稱、URL地址、Iframe的地址) width: 630, //彈出層的寬度 height: 400, //彈出層的高度 scrollTop: 200 //層滑動的高度也就是彈出層時離頂部滑動的距離 }); }}function loadposhytip(currClass) { $("." + currClass).poshytip({ className: 'tip-yellowsimple', content: function (updateCallback) { classId = $(this).attr("classId"); var htmss = ""; $.getJSON(gifturl + '?ac=1&classId=' + classId + '&pageSize=6&pageIndex=1' + "&r=" + Math.random(), function (data) { var container = "<div id=/"sphtml/" class=/"giftInfo1/">"; container += "<div> 精選好禮，點擊就可贈送哦！</div>"; container += "<div class=/"birthdayGift/">"; $.each(data[0].items, function (i, item) { container += " <img src=/"" + item.pic + "/" alt=/"送此件禮物給/" onclick=/"sendgift(this)/" gid=/"" + item.id + "/" yulu=/"" + item.defaultYulu + "/"/>"; }); container += "</div>"; container += "<div class=/"moreRecommend/" >更多推薦</div>"; container += "</div>"; if (data[0].count == "0") container = "還沒有添加禮品，請聯系管理員添加！"; updateCallback(container); } ); return "加載中....."; }, alignTo: 'target', alignX: 'center', alignY: 'bottom', offsetX: 0, offsetY: 5 }); loadRecommenClick();}由于這是用在項目中去了，沒有做出demo出來，我就只上圖兩種了。其中禮物都是通過數據庫添加的，ajax加載出來的。
以上所述是小編給大家介紹的基于jQuery實現仿QQ空間送禮物功能代碼的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
