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


Posted in Javascript onMay 24, 2016

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

如下图所示:

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

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

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

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

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

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

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

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

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

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

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

那是要我自己来弄一个弹出层插件来了么,能写当然好 。对于不是js告诉来,找一款比较简单的来定制不是更快捷。这里https://3water.com/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=\"" + 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空间送礼物功能代码

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

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

Javascript 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
理解Javascript闭包
Nov 01 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 #Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 #Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
You might like
PHP读取目录下所有文件的代码
2008/01/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
javascript的内存管理详解
2013/08/07 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python函数定义和调用过程详解
2020/02/09 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
2014年学校财务工作总结
2014/12/06 职场文书
介绍信模板
2015/01/31 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技