基于jQuery實現(xiàn)仿QQ空間送禮物功能代碼

更新時間：2016年05月24日 08:58:21 作者：劃風

qq空間的一份虛擬禮物可能會讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧

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

如下圖所示：

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

怎么實現(xiàn)那上面的功能呢？

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

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

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

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

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

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

那是要我自己來弄一個彈出層插件來了么，能寫當然好。對于不是js告訴來，找一款比較簡單的來定制不是更快捷。這里http://chabaoo.cn/article/84902.htm比較秀珍的彈出層插件。使用和修改起來也非常方便了。

用poshytip的方法loadposhytip里面加載了內(nèi)容后就給綁定給更多綁定popdialog方法。只要我們就可以實現(xiàn)那功能了。

實現(xiàn)的方式就是那樣的了，下面是我使用的部分js代碼

function loadRecommenClick() {
 if ($("#floatBoxBg").length == 0) {
  $(".moreRecommend").PopDialog({
   Event: "click",        //觸發(fā)響應事件
   title: "送禮物",       //彈出層的標題
   content: "/peoplename/toPeople.aspx?typeId=",        //彈出層的內(nèi)容獲取(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 = "還沒有添加禮品，請聯(lián)系管理員添加！";
       updateCallback(container);
      }
     );
   return "加載中.....";
  },
  alignTo: 'target',
  alignX: 'center',
  alignY: 'bottom',
  offsetX: 0,
  offsetY: 5
 });
  loadRecommenClick();
}

由于這是用在項目中去了，沒有做出demo出來，我就只上圖兩種了。其中禮物都是通過數(shù)據(jù)庫添加的，ajax加載出來的。