大佬教程收集整理的这篇文章主要介绍了基于jQuery实现仿QQ空间送礼物功能代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人。我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!!
单击其中的一个礼物,就会马上送出去。但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示:
就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框。
网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件。
jquery中tips的有很多插件,但是大部分都是跟随鼠标走的,你离开那个指定的位置就会消失。现在这个是把鼠标是要可以放到弹出的tips上面的。之后发现了一款符合需求又很强大的tips插件poshytip。poshytip使用简单,它还可以支持ajax来动态的加载内容来的,就可以通过数据库来调用指定分类的礼物出来了。
还需要一个弹出层的,为了更容易的去实现,把弹出层另外新作了一个页面,点击更多的时候在当前窗口加载另外一个新的页面作为弹出层。
那是要我自己来弄一个弹出层插件来了么,能写当然好 。对于不是js告诉来,找一款比较简单的来定制不是更快捷。这里比较秀珍的弹出层插件。使用和修改起来也非常方便了。
用poshytip的方法loadposhytip里面加载了内容后就给绑定给更多绑定popdialog方法。只要我们就可以实现那功能了。
实现的方式就是那样的了,下面是我使用的部分js代码
BoxBg").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 = "以上是大佬教程为你收集整理的基于jQuery实现仿QQ空间送礼物功能代码全部内容,希望文章能够帮你解决基于jQuery实现仿QQ空间送礼物功能代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。