文档章节

jquery实现悬浮框

mrliuze
 mrliuze
发布于 2015/11/27 16:03
字数 599
阅读 82
收藏 0

简述:

实现一个头像悬浮框

    以jquery插件形式实现, 同时使用cookie json做缓存

    ,减少短期内hover时间连续触发,导致服务器过多请求


代码:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /**  
  2.  * 鼠标移动到头像后,出现弹出框  
  3.  * @param obj  
  4.  */  
  5. function avatarOnMouseOver(obj, userId, imageUrl){     
  6.     var avatarPopWindow = $("#iuyt").removeClass("hide");  
  7.     $(obj).append(avatarPopWindow);  
  8.     callAvatarData(avatarPopWindow, userId, imageUrl);  
  9. };  
  10.   
  11.   
  12. /**  
  13.  * 向后台请求人员头像的数据  
  14.  */  
  15. function callAvatarData(popWin, userId, imageUrl){  
  16.     // 先从cookie中寻找,如果有的话,就不再向后台去要  
  17.     var userInfoStr = $.cookie(userId);  
  18.     if(userInfoStr != null){  
  19.         var userInfo = JSON.parse(userInfoStr);  
  20.         setUserInfoToPopWindow(popWin, userInfo)  
  21.     }else{  
  22.         $.ajax({  
  23.             type: "post",  
  24.             url: '/webproj/staff/getUserInfo',    
  25.             dataType:"json",   
  26.             data: {  
  27.                 userId: userId  
  28.             },   
  29.             success: function(userInfo){    
  30.                 setUserInfoToPopWindow(popWin, userInfo)  
  31.                 var dateNow = new Date();  
  32.                 var dateExpired = new Date();  
  33.                 dateExpired.setTime(dateNow.getTime() + (60 * 1000));  
  34.                 $.cookie(userId, JSON.stringify(userInfo), {expires: dateExpired})  
  35.             }    
  36.         });       
  37.     }  
  38. }  
  39.   
  40.   
  41. function setUserInfoToPopWindow(popWin,userInfo){  
  42.     // 得到的数据填充人员名片  
  43.     $(popWin).find("#avatarName").text(userInfo.name);  
  44.     $(popWin).find("#avatarIconUrl").attr('src', userInfo.iconUrl);  
  45.     $(popWin).find("#avatarOrganizationName").text(userInfo.organizationName);  
  46.     $(popWin).find("#avatarPhone").text("电话:" + userInfo.phone);  
  47.     $(popWin).find("#avatarMobile").text("手机:" + userInfo.mobile);  
  48.     $(popWin).find("#avatarEmail").text("邮箱:" + userInfo.email);  
  49.     $(popWin).find("#avatarCompanyName").text(userInfo.companyName);  
  50. }  
  51.   
  52.   
  53. /**  
  54.  * 鼠标移开后,隐藏弹出框  
  55.  * @param obj  
  56.  */  
  57. function avatarOnMouseOut(obj){  
  58.     $("#iuyt").addClass("hide");  
  59. }  
  60.   
  61.   
  62.   
  63. /**  
  64.  * 头像悬浮框插件  
  65.  */  
  66. (function($){  
  67.     $.fn.avatar_hover = function(options){  
  68.         options = $.extend({  
  69.               
  70.         }, options);  
  71.       
  72.         return this.each(function(){  
  73.             var userId = $(this).attr("data_userId");  
  74.             var iconUrl = $(this).attr("data_iconUrl");  
  75.             $(this).mouseover(function(){  
  76.                 avatarOnMouseOver(this, userId, iconUrl);  
  77.             })  
  78.             $(this).mouseout(function(){  
  79.                 avatarOnMouseOut(this, userId, iconUrl);  
  80.             })  
  81.         });  
  82.     };  
  83. })(jQuery)  

页面上按照自己的需求 定义了两个标签
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <div id="avatar_img" class="z haoyu" data_userId="${topicInfo.topicUserVo.userId }"   
  2.                   data_iconUrl="${topicInfo.topicUserVo.iconUrl}" >  
  3.                    <a href="#"><img class="gb_v42" src="${topicInfo.topicUserVo.iconUrl }"></a>  
  4.                 </div>      


头像布局, 函数中利用avatar_img这个id全局初始化

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <script src="${rc.contextPath}/common/static/lib/avatar_hover/js/avatar_hover_window.js" type="text/javascript"></script>  
  2. <#-- 话题头像悬浮框  库 END -->  
  3.   
  4. <div class="b-card hide"  id="iuyt">  
  5.   <div class="bc-bgimg">  
  6.     <div class="bc-icon"><img id="avatarIconUrl"  class="gb_v72" src="" /></div>  
  7.     <div class="bc-name" id="avatarName"></div>  
  8.     <div class="bc-post" id="avatarOrganizationName"></div>  
  9.     <div class="bc-oname" id="avatarCompanyName"></div>  
  10.     <ul class="bc-more">  
  11.       <li id="">手机:保密</li>  
  12.       <li id="avatarPhone">电话:</li>        
  13.       <li id="avatarEmail">邮箱:</li>  
  14.     </ul>  
  15.   </div>  
  16. </div><!--limia-->  
  17.   
  18. <script type="text/javascript" >  
  19. $(function(){  
  20.     $("#avatar_img").avatar_hover({  
  21.       
  22.     });  
  23. })  
  24. </script>  


简述:

用cookie 缓存数据


代码:

如果cookie需要存储对象,那么就需要转换为JSON格式之后存储

    --  定义失效时间为1分钟

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. var dateNow = new Date();  
  2. var dateExpired = new Date();  
  3. dateExpired.setTime(dateNow.getTime() + (60 * 1000));  
  4. $.cookie(userId, JSON.stringify(userInfo), {expires: dateExpired})  


之后使用时,则将对象转换为object后返回

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. // 先从cookie中寻找,如果有的话,就不再向后台去要  
  2. var userInfoStr = $.cookie(userId);  
  3. if(userInfoStr != null){  
  4.     var userInfo = JSON.parse(userInfoStr);  
  5.     setUserInfoToPopWindow(popWin, userInfo)  
  6. }  


如果要定义天

则使用

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $.cookie("<%=courseKey %>""已看过教程", {expires: 365});  
http://blog.csdn.net/anialy/article/details/28109075


本文转载自:http://blog.csdn.net/anialy/article/details/28860507

共有 人打赏支持
mrliuze
粉丝 14
博文 155
码字总数 12377
作品 0
浦东
程序员
私信 提问
8 款值得一试的全新 jQuery 插件

今天本文向大家推荐8款最新的jQuery插件,希望你能够喜欢。 1、jQuery带缩略图竖向伸展焦点图 这是一款jQuery的竖向伸展焦点图,该jQuery焦点图有两个特点,第一切换的按钮有缩略图,第二图片...

yykj
2013/10/24
940
3
分享7个最新的使用jQuery实现的悬浮特效

日期:2011/12/12 来源:GBin1.com 鼠标悬浮特效是网页制作的常用特效之一,最早使用flash可以创新的制作非常炫的效果,现在我们同样也可以使用CSS和Javascript来实现。 今天的这个文章中,我...

gbin1
2011/12/13
6.6K
4
2012年度最新的7款导航菜单Jquery特效

网站悬浮快速导航Jquery特效 此Jquery特效是一款非常实用的功能,最近很多网友想要JquerySchool网站悬浮快速导航的特效,为了满足网友们,今天把它整理出来分享给网友们用,此功能原来来自网...

邓剑彬
2012/11/29
605
10
分享jQuery实现的超酷悬浮覆盖式的注释效果

发布时间:2011/07/25 编译:Terry li - GBin1.com 原文:tympanus.net 今天GBin1.com特选了一个非常实用的jQuery的悬浮覆盖效果的教程, 这里我们将使用jQuery创建一个非常简单的覆盖效果用...

gbin1
2011/08/03
153
2
分享10个帮助你实现超酷特效的jQuery插件

日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件。希望大家喜欢! 1. jQuery Lens Flare...

gbin1
2012/04/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

弹窗时候禁止页面滚动

1、依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失......

Jack088
15分钟前
2
0
.NET的数学库NMath实用教程——创建最小二乘法

NMath是一个适用于所有.NET语言,如C#、Visual Basic、F#和.NET的数学库,它包含了.NET平台上的面向对象数字计算的基础类。我们将以连载的形式向大家介绍NMath的实用教程,有任何建议或提示...

ymy_666666
15分钟前
1
0
索尼为收购工作室准备,对抗微软?

对比来说,索尼方面不但没有增加新的工作室,反而在过去两年内关闭了一些工作室。面对微软的步步紧逼,索尼最新的招聘广告暗示将来有可能会收购一些工作室。 在领英上,索尼互动娱乐发布了两...

linuxCool
16分钟前
1
0
公司网站有漏洞被入侵该怎么解决

2019年1月14日消息,thinkphp又被爆出致命漏洞,可以直接远程代码执行,getshell提权写入网站木马到网站根目录,甚至直接提权到服务器,该漏洞影响版本ThinkPHP 5.0、ThinkPHP 5.0.10、Think...

网站安全
28分钟前
2
0
centos7 Nginx+rtmp 搭建流媒体服务器

一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum -y install gcc gcc-c++ 二. PCRE pcre-devel 安装 PCRE(Perl Compatib...

legend3
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部