成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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

如下圖所示：

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

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

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

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

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

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

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

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

那是要我自己來弄一個彈出層插件來了么，能寫當然好 。對于不是js告訴來，找一款比較簡單的來定制不是更快捷。這里http://www.gimoo.net/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="http://www.gimoo.net/t/1902/5c74c7d2c447b.html" + 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空間送禮物功能代碼的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！