快捷導(dǎo)航

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

更新時(shí)間：2016年05月24日 08:58:21 作者：劃風(fēng)

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

我們?cè)赒Q空間里面有一個(gè)送禮物的功能，顯示了最近過生日的人。我們只要把鼠標(biāo)放到如下圖的生日快樂那標(biāo)簽上，就會(huì)顯示可以給該人送的禮物??！

如下圖所示：

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

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

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

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

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

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

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

彈出層的很多，用colorbox等其它jquery插件。直接只用使用之后，發(fā)現(xiàn)彈出來的窗口說鏈接錯(cuò)誤！或者被取消彈出層等。那是因?yàn)槲覀冊(cè)趩螕袅烁嗟臅r(shí)候，彈出了一個(gè)新的窗口，鼠標(biāo)離開了tips彈出來的窗口，這時(shí)候那tips出來的就會(huì)消失，而彈出加載另外的頁面的被取消了。

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

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

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

function loadRecommenClick() {
 if ($("#floatBoxBg").length == 0) {
  $(".moreRecommend").PopDialog({
   Event: "click",        //觸發(fā)響應(yīng)事件
   title: "送禮物",       //彈出層的標(biāo)題
   content: "/peoplename/toPeople.aspx?typeId=",        //彈出層的內(nèi)容獲取(text文本、容器ID名稱、URL地址、Iframe的地址)
   width: 630,         //彈出層的寬度
   height: 400,         //彈出層的高度 
   scrollTop: 200        //層滑動(dòng)的高度也就是彈出層時(shí)離頂部滑動(dòng)的距離
  });
 }
}
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> 精選好禮，點(diǎn)擊就可贈(zèng)送哦！</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 = "還沒有添加禮品，請(qǐng)聯(lián)系管理員添加！";
       updateCallback(container);
      }
     );
   return "加載中.....";
  },
  alignTo: 'target',
  alignX: 'center',
  alignY: 'bottom',
  offsetX: 0,
  offsetY: 5
 });
  loadRecommenClick();
}

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

以上所述是小編給大家介紹的基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: