基于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 继承实例分析
Nov 04 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
十大“创意”战术!
2020/03/04 星际争霸
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
php array_map()函数实例用法
2021/03/03 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
原生js实现轮播图
2017/02/27 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python中的列表推导浅析
2014/04/26 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python实现石头剪刀布小游戏
2021/01/20 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
利用python汇总统计多张Excel
2020/09/22 Python
用python对excel查重
2020/12/07 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
数控技术专业推荐信
2013/11/01 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
运动会稿件50字
2014/02/17 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
青奥会口号
2014/06/12 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书