基于jQuery实现模仿QQ空间送礼功能的代码

我们在QQ空间有送礼功能，显示最近过生日的人。只要我们把鼠标放在下图生日快乐的标签上，它就会显示出可以送给这个人的礼物！

如下图所示：

点击其中一个礼物，它将被立即送出。但是我们现在想说的是，当我们点击更多的时候，一个新的窗口会弹出在当前页面的前面！下图显示：

以上功能如何实现？

只需将鼠标放在上面，弹出一天的提示，点击提示中的控件，然后弹出另一个弹出框。

网上会有很多好的插件，所以去网上找对应的jquery插件。

jquery的tips中有很多插件，但是大部分都是跟着鼠标走的，离开指定位置就会消失。现在这是把鼠标放在弹出的提示上。之后，一个强大的tips插件poshytip被发现。Poshytip使用简单，还可以支持ajax动态加载内容，这样就可以通过数据库调用指定类别的礼物。

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

还需要一个弹出层，为了更容易实现，为弹出层新建一个页面，点击更多时在当前窗口加载另一个新页面作为弹出层。

弹出很多层，使用colorbox等其他jquery插件。直接用了之后发现弹出的窗口说链接错了！或者喷射层被取消，等等。那是因为当我们点击更多的时候，会弹出一个新的窗口，鼠标离开窗口会弹出提示。这时，提示会消失，加载另一个页面的弹出窗口被取消。

要不要我自己去弄个弹出层插件？写出来很好。不是针对js，找一个更简单的来定制也不会更快。这里//www . JB 51 . net/article/84902 . htm比较了秀珍的弹出插件。并且使用和修改都非常方便。

使用poshytip方法加载poshytip，然后将其绑定到更多绑定popdialog方法。只要我们能实现这个功能。

这就是它的实现方式。下面是我使用的一些js代码。

函数LoadRep建议单击(){ if ($('#floatBoxBg ').长度==0) { $('。更多推荐').PopDialog({ Event: 'click '，//触发响应事件标题： '送礼物', //弹出层的标题内容：/人名/to people。aspx？typeId='，//弹出层的内容获取（文本文本、容器身份名称、网址地址、Iframe的地址)宽度： 630,//弹出层的宽度高度： 400,//弹出层的高度scrollTop: 200 //层滑动的高度也就是弹出层时离顶部滑动的距离});} }函数loadposhytip(currClass) { $(' . ')currClass ).poshytip({类名： '提示-黄色简单'，内容：函数(updateCallback) { classId=$(this).attr(' CLaSS id ')；var htmss=$。getJSON(gifturl '？AC=1 classId=' class id '页面大小=6页面索引=1 ' ' r='数学。random()，函数（数据){ var container=' div id=\ ' SPH tml ' class=\ ' giftinfo 1 \ '；容器='div精选好礼，点击就可赠送哦！/div '；容器='div class=\ '生日礼物\ ';$.每个（数据[0]。items，function (i，item){ container=' img src=\ ' item。pic ' \ ' alt=\ '送此件礼物给\ ' onclick=\ '发送礼物(this)\ ' GID=\ '项目。id ' \ '鲁豫=\ '项。defaultyulu ' \ '/'；});容器='/div '；容器=' div class=\ ' moreRecommend \ '更多推荐/div '；容器='/div '；如果(数据[0]。计数=='0 ')容器='还没有添加礼品，请联系管理员添加!'；updateCallback(容器);} );"返回"加载中.},对齐："目标",对齐："中心",对齐："底部",偏移： 0,偏移： 5 });loadrecommendeclick()；}由于这是用在项目中去了，没有做出演示出来，我就只上图两种了。其中礼物都是通过数据库添加的，ajax加载出来的。

以上所述是小编给大家介绍的基于框架实现仿即时通信软件空间送礼物功能代码的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！