基于jQuery實現仿QQ空間送禮物功能代碼

2019-11-20 09:56:52

字體：大中小

來源：轉載

供稿：網友

我們在QQ空間里面有一個送禮物的功能，顯示了最近過生日的人。我們只要把鼠標放到如下圖的生日快樂那標簽上，就會顯示可以給該人送的禮物！！

如下圖所示：

單擊其中的一個禮物，就會馬上送出去。但是我們現在是要說的還有單擊更多的時候，會另外彈出一個新的窗口在當前頁面最前面！如下圖顯示：

怎么實現那上面的功能呢？

就是把鼠標放上去，彈出一天tips，單擊tips里面的控件，之后彈出另外一個彈出框。

網上就會有很多比較好的插件，就先到網上去找了相對應的jquery插件。

jquery中tips的有很多插件，但是大部分都是跟隨鼠標走的，你離開那個指定的位置就會消失。現在這個是把鼠標是要可以放到彈出的tips上面的。之后發現了一款符合需求又很強大的tips插件poshytip。poshytip使用簡單，它還可以支持ajax來動態的加載內容來的，就可以通過數據庫來調用指定分類的禮物出來了。

更多的poshytip示例和演示在：http://vadikom.com/demos/poshytip/

還需要一個彈出層的，為了更容易的去實現，把彈出層另外新作了一個頁面，點擊更多的時候在當前窗口加載另外一個新的頁面作為彈出層。

彈出層的很多，用colorbox等其它jquery插件。直接只用使用之后，發現彈出來的窗口說鏈接錯誤！或者被取消彈出層等。那是因為我們在單擊了更多的時候，彈出了一個新的窗口，鼠標離開了tips彈出來的窗口，這時候那tips出來的就會消失，而彈出加載另外的頁面的被取消了。

那是要我自己來弄一個彈出層插件來了么，能寫當然好。對于不是js告訴來，找一款比較簡單的來定制不是更快捷。這里//m.survivalescaperooms.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加載出來的。