基于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 相关文章推荐
js怎么终止程序return不行换jfslk
May 30 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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开发工具之vs2005图解
2008/01/12 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
一个PHP的String类代码
2010/04/20 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP生成唯一订单号
2015/07/05 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python ORM编程基础示例
2020/02/02 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
关于读书的演讲稿
2014/05/07 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
Nginx配置使用详解
2022/07/07 Servers