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. function callAvatarData(popWin, userId, imageUrl){
  14. // 先从cookie中寻找,如果有的话,就不再向后台去要
  15. var userInfoStr = $.cookie(userId);
  16. if(userInfoStr != null){
  17. var userInfo = JSON.parse(userInfoStr);
  18. setUserInfoToPopWindow(popWin, userInfo)
  19. }else{
  20. $.ajax({
  21. type: "post",
  22. url: '/webproj/staff/getUserInfo',
  23. dataType:"json",
  24. data: {
  25. userId: userId
  26. },
  27. success: function(userInfo){
  28. setUserInfoToPopWindow(popWin, userInfo)
  29. var dateNow = new Date();
  30. var dateExpired = new Date();
  31. dateExpired.setTime(dateNow.getTime() + (60 * 1000));
  32. $.cookie(userId, JSON.stringify(userInfo), {expires: dateExpired})
  33. }
  34. });
  35. }
  36. }
  37. function setUserInfoToPopWindow(popWin,userInfo){
  38. // 得到的数据填充人员名片
  39. $(popWin).find("#avatarName").text(userInfo.name);
  40. $(popWin).find("#avatarIconUrl").attr('src', userInfo.iconUrl);
  41. $(popWin).find("#avatarOrganizationName").text(userInfo.organizationName);
  42. $(popWin).find("#avatarPhone").text("电话:" + userInfo.phone);
  43. $(popWin).find("#avatarMobile").text("手机:" + userInfo.mobile);
  44. $(popWin).find("#avatarEmail").text("邮箱:" + userInfo.email);
  45. $(popWin).find("#avatarCompanyName").text(userInfo.companyName);
  46. }
  47. /**
  48. * 鼠标移开后,隐藏弹出框
  49. * @param obj
  50. */
  51. function avatarOnMouseOut(obj){
  52. $("#iuyt").addClass("hide");
  53. }
  54. /**
  55. * 头像悬浮框插件
  56. */
  57. (function($){
  58. $.fn.avatar_hover = function(options){
  59. options = $.extend({
  60. }, options);
  61. return this.each(function(){
  62. var userId = $(this).attr("data_userId");
  63. var iconUrl = $(this).attr("data_iconUrl");
  64. $(this).mouseover(function(){
  65. avatarOnMouseOver(this, userId, iconUrl);
  66. })
  67. $(this).mouseout(function(){
  68. avatarOnMouseOut(this, userId, iconUrl);
  69. })
  70. });
  71. };
  72. })(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. <div class="b-card hide"  id="iuyt">
  4. <div class="bc-bgimg">
  5. <div class="bc-icon"><img id="avatarIconUrl"  class="gb_v72" src="" /></div>
  6. <div class="bc-name" id="avatarName"></div>
  7. <div class="bc-post" id="avatarOrganizationName"></div>
  8. <div class="bc-oname" id="avatarCompanyName"></div>
  9. <ul class="bc-more">
  10. <li id="">手机:保密</li>
  11. <li id="avatarPhone">电话:</li>
  12. <li id="avatarEmail">邮箱:</li>
  13. </ul>
  14. </div>
  15. </div><!--limia-->
  16. <script type="text/javascript" >
  17. $(function(){
  18. $("#avatar_img").avatar_hover({
  19. });
  20. })
  21. </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

jquery实现悬浮框相关推荐

  1. 网页中常见的移动悬浮框的制作

    这几天要做一个很常见的移动悬浮框,网上找了下,代码比较长,也没什么耐心看,于是就自己用jquery写了一下,本人也只是一个初学者,水平有限,文章有什么不足之处欢迎指正! <!doctype ht ...

  2. python点击弹出悬浮框_“鼠标移入显示悬浮框”特效【转】

    1.效果说明 在效果当中,当用户将鼠标移入一个块时,会从鼠标的移入方向滑入一个悬浮块,悬浮块会随着鼠标移出当前块,且滑出方向遵循鼠标的移出方向 2.实现原理分析 1.结构分析 由于悬浮层有可能从上下左 ...

  3. Echarts之悬浮框中的数据排序

    Echarts非常强大,配置也非常的多,有很多细节需要深入研究.详解一下关于悬浮框中的数据排序问题 悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配 ...

  4. Android UI开发第十四篇——可以移动的悬浮框

    工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息或拦截短信信息显示给用户,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用了循环显示Toast的方 ...

  5. 用WindowManager实现Android悬浮框以及拖动事件

    下面的App程序代码实现通过主Activity的启动按钮,启动一个Service,然后在Service中创建添加悬浮窗口:(话不多说,直接上代码) 在这里我们先看一下需要创建的类和布局和需要添加的权限 ...

  6. mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法

    要实现的效果和代码思路 简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现 最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的. ...

  7. Android 应用开机自启和无需权限开启悬浮框

    开机自启主要自定义广播接收类,且需要在清单文件中注册,不要在代码中动态注册. <uses-permission android:name="android.permission.REC ...

  8. android 浮动文字提示,怎么在Android中实现一个自由拖动并显示文字的悬浮框

    怎么在Android中实现一个自由拖动并显示文字的悬浮框 发布时间:2021-01-27 15:34:05 来源:亿速云 阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android中实现一 ...

  9. php悬浮框,PopupWindow(悬浮框)的基本使用

    本节引言:本节给大家带来的是最后一个用于显示信息的UI控件--PopupWindow(悬浮框),如果你想知道 他长什么样子,你可以打开你手机的QQ,长按列表中的某项,这个时候后弹出一个黑色的小 对话框 ...

最新文章

  1. NLP入门必知必会(一):Word Vectors
  2. VSS2005下载地址
  3. 汽车票销售系统mysql,jsp683客运汽车票网上售票系统mysql
  4. 点击编辑的时候如何绑定DropDownList
  5. Android Settings开发之修改
  6. 四阶显式Adams法求方程组C语言,第五讲第4章线性多步法(续
  7. 【Linux系统编程】Linux进程管理
  8. SAP Spartacus 4.0 源代码模式下开启 SSR,为什么会从本地去加载 all.css?
  9. 如何在没有 System.Drawing.Common 的情况下使用 C# 获取图片格式
  10. 深度优先搜索----poj 1321棋盘问题
  11. 阿里云盘小白羊版 v2.9.19 绿色版
  12. 数字图像处理--图像颜色
  13. Problem(三):工作中的记录。。。。
  14. yolo系列外文翻译_测评:英文文献、论文的翻译软件对比
  15. 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II (BFS + DP +多开一维)
  16. lintcode:Search Insert Position 搜索插入位置
  17. 光(复振幅)在自由空间中传播的matlab仿真——傅里叶光学方法
  18. 用VBA破解Excel密码
  19. java中cbrt_JavaScript中带有示例的Math.cbrt()方法
  20. PHP 实现word在线预览

热门文章

  1. DNS解释问题:java.net.UnknownHostException
  2. JAVA ActiveMQ消息发送和接收
  3. Understanding Linux CPU Load - when should you be worried?
  4. Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值...
  5. 【mysql】全文索引match多列报错
  6. 如何插入一条记录获取插入后的自动增长ID列的方法.
  7. 关于安装VS2005或MSDN时遇到“Please insert the disk:XXXXXXX” 错误提示的解决方法!...
  8. C# DataTable 用法简介
  9. Linux 命令(11)—— col 命令
  10. Oracle数据库创建表空间