热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

qq空间的一份虚拟礼物可能会让很久不曾相见的朋友拉近一些距离。那么基于jquery代码是如何实现此功能的呢?下面脚本之家小编给大家分享基于jQuery实现仿QQ空间送礼物功能代码,一起看看吧

我们在QQ空间里面有一个送礼物的功能,显示了最近过生日的人。我们只要把鼠标放到如下图的生日快乐那标签上,就会显示可以给该人送的礼物!!

如下图所示:

单击其中的一个礼物,就会马上送出去。但是我们现在是要说的还有单击更多的时候,会另外弹出一个新的窗口在当前页面最前面!如下图显示:

怎么实现那上面的功能呢?

就是把鼠标放上去,弹出一天tips,单击tips里面的控件,之后弹出另外一个弹出框。

网上就会有很多比较好的插件,就先到网上去找了相对应的jquery插件。

jquery中tips的有很多插件,但是大部分都是跟随鼠标走的,你离开那个指定的位置就会消失。现在这个是把鼠标是要可以放到弹出的tips上面的。之后发现了一款符合需求又很强大的tips插件poshytip。poshytip使用简单,它还可以支持ajax来动态的加载内容来的,就可以通过数据库来调用指定分类的礼物出来了。

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

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

弹出层的很多,用colorbox等其它jquery插件。直接只用使用之后,发现弹出来的窗口说链接错误!或者被取消弹出层等。那是因为我们在单击了更多的时候,弹出了一个新的窗口,鼠标离开了tips弹出来的窗口,这时候那tips出来的就会消失,而弹出加载另外的页面的被取消了。

那是要我自己来弄一个弹出层插件来了么,能写当然好 。对于不是js告诉来,找一款比较简单的来定制不是更快捷。这里https://www.jb51.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= "
"; container += "
精选好礼,点击就可赠送哦!
"; container += "
"; $.each(data[0].items, function (i, item) { container += " \"送此件礼物给\""; }); container += "
"; container += "
更多推荐
"; container += "
"; if (data[0].count == "0") cOntainer= "还没有添加礼品,请联系管理员添加!"; updateCallback(container); } ); return "加载中....."; }, alignTo: 'target', alignX: 'center', alignY: 'bottom', offsetX: 0, offsetY: 5 }); loadRecommenClick(); }

由于这是用在项目中去了,没有做出demo出来,我就只上图两种了。其中礼物都是通过数据库添加的,ajax加载出来的。

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


推荐阅读
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 探讨如何高效使用FastJSON进行JSON数据解析,特别是从复杂嵌套结构中提取特定字段值的方法。 ... [详细]
  • 本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 交互式左右滑动导航菜单设计
    本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法,适用于需要展示多个链接或项目的网页布局。 ... [详细]
author-avatar
个信2602881723
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有