jquery实现悬浮框

2019独角兽企业重金招聘Python工程师标准>>>

简述：

实现一个头像悬浮框

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

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

代码：

[html]  view plain copy

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

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

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

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

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

1. $.cookie("<%=courseKey %>", "已看过教程", {expires: 365});  

http://blog.csdn.net/anialy/article/details/28109075

转载于:https://my.oschina.net/u/1034537/blog/536521