jquery实现悬浮框
2019独角兽企业重金招聘Python工程师标准>>>
简述:
实现一个头像悬浮框
以jquery插件形式实现, 同时使用cookie json做缓存
,减少短期内hover时间连续触发,导致服务器过多请求
代码:
- /**
- * 鼠标移动到头像后,出现弹出框
- * @param obj
- */
- function avatarOnMouseOver(obj, userId, imageUrl){
- var avatarPopWindow = $("#iuyt").removeClass("hide");
- $(obj).append(avatarPopWindow);
- callAvatarData(avatarPopWindow, userId, imageUrl);
- };
- /**
- * 向后台请求人员头像的数据
- */
- function callAvatarData(popWin, userId, imageUrl){
- // 先从cookie中寻找,如果有的话,就不再向后台去要
- var userInfoStr = $.cookie(userId);
- if(userInfoStr != null){
- var userInfo = JSON.parse(userInfoStr);
- setUserInfoToPopWindow(popWin, userInfo)
- }else{
- $.ajax({
- type: "post",
- url: '/webproj/staff/getUserInfo',
- dataType:"json",
- data: {
- userId: userId
- },
- success: function(userInfo){
- setUserInfoToPopWindow(popWin, userInfo)
- var dateNow = new Date();
- var dateExpired = new Date();
- dateExpired.setTime(dateNow.getTime() + (60 * 1000));
- $.cookie(userId, JSON.stringify(userInfo), {expires: dateExpired})
- }
- });
- }
- }
- function setUserInfoToPopWindow(popWin,userInfo){
- // 得到的数据填充人员名片
- $(popWin).find("#avatarName").text(userInfo.name);
- $(popWin).find("#avatarIconUrl").attr('src', userInfo.iconUrl);
- $(popWin).find("#avatarOrganizationName").text(userInfo.organizationName);
- $(popWin).find("#avatarPhone").text("电话:" + userInfo.phone);
- $(popWin).find("#avatarMobile").text("手机:" + userInfo.mobile);
- $(popWin).find("#avatarEmail").text("邮箱:" + userInfo.email);
- $(popWin).find("#avatarCompanyName").text(userInfo.companyName);
- }
- /**
- * 鼠标移开后,隐藏弹出框
- * @param obj
- */
- function avatarOnMouseOut(obj){
- $("#iuyt").addClass("hide");
- }
- /**
- * 头像悬浮框插件
- */
- (function($){
- $.fn.avatar_hover = function(options){
- options = $.extend({
- }, options);
- return this.each(function(){
- var userId = $(this).attr("data_userId");
- var iconUrl = $(this).attr("data_iconUrl");
- $(this).mouseover(function(){
- avatarOnMouseOver(this, userId, iconUrl);
- })
- $(this).mouseout(function(){
- avatarOnMouseOut(this, userId, iconUrl);
- })
- });
- };
- })(jQuery)
页面上按照自己的需求 定义了两个标签
- <div id="avatar_img" class="z haoyu" data_userId="${topicInfo.topicUserVo.userId }"
- data_iconUrl="${topicInfo.topicUserVo.iconUrl}" >
- <a href="#"><img class="gb_v42" src="${topicInfo.topicUserVo.iconUrl }"></a>
- </div>
头像布局, 函数中利用avatar_img这个id全局初始化
- <script src="${rc.contextPath}/common/static/lib/avatar_hover/js/avatar_hover_window.js" type="text/javascript"></script>
- <#-- 话题头像悬浮框 库 END -->
- <div class="b-card hide" id="iuyt">
- <div class="bc-bgimg">
- <div class="bc-icon"><img id="avatarIconUrl" class="gb_v72" src="" /></div>
- <div class="bc-name" id="avatarName"></div>
- <div class="bc-post" id="avatarOrganizationName"></div>
- <div class="bc-oname" id="avatarCompanyName"></div>
- <ul class="bc-more">
- <li id="">手机:保密</li>
- <li id="avatarPhone">电话:</li>
- <li id="avatarEmail">邮箱:</li>
- </ul>
- </div>
- </div><!--limia-->
- <script type="text/javascript" >
- $(function(){
- $("#avatar_img").avatar_hover({
- });
- })
- </script>
简述:
用cookie 缓存数据
代码:
如果cookie需要存储对象,那么就需要转换为JSON格式之后存储
-- 定义失效时间为1分钟
- var dateNow = new Date();
- var dateExpired = new Date();
- dateExpired.setTime(dateNow.getTime() + (60 * 1000));
- $.cookie(userId, JSON.stringify(userInfo), {expires: dateExpired})
之后使用时,则将对象转换为object后返回
- // 先从cookie中寻找,如果有的话,就不再向后台去要
- var userInfoStr = $.cookie(userId);
- if(userInfoStr != null){
- var userInfo = JSON.parse(userInfoStr);
- setUserInfoToPopWindow(popWin, userInfo)
- }
如果要定义天
则使用
- $.cookie("<%=courseKey %>", "已看过教程", {expires: 365});
http://blog.csdn.net/anialy/article/details/28109075
转载于:https://my.oschina.net/u/1034537/blog/536521
jquery实现悬浮框相关推荐
- 网页中常见的移动悬浮框的制作
这几天要做一个很常见的移动悬浮框,网上找了下,代码比较长,也没什么耐心看,于是就自己用jquery写了一下,本人也只是一个初学者,水平有限,文章有什么不足之处欢迎指正! <!doctype ht ...
- python点击弹出悬浮框_“鼠标移入显示悬浮框”特效【转】
1.效果说明 在效果当中,当用户将鼠标移入一个块时,会从鼠标的移入方向滑入一个悬浮块,悬浮块会随着鼠标移出当前块,且滑出方向遵循鼠标的移出方向 2.实现原理分析 1.结构分析 由于悬浮层有可能从上下左 ...
- Echarts之悬浮框中的数据排序
Echarts非常强大,配置也非常的多,有很多细节需要深入研究.详解一下关于悬浮框中的数据排序问题 悬浮框的数据排序默认是根据series中的数据位置排序的,在我们想自定义排序时,在echarts的配 ...
- Android UI开发第十四篇——可以移动的悬浮框
工作中遇到一些项目需要把窗体显示在最上层,像来电弹窗显示电话号码等信息或拦截短信信息显示给用户,我们想这些数据放在最上层,activity就满足不了我们的需求了,有些开发者使用了循环显示Toast的方 ...
- 用WindowManager实现Android悬浮框以及拖动事件
下面的App程序代码实现通过主Activity的启动按钮,启动一个Service,然后在Service中创建添加悬浮窗口:(话不多说,直接上代码) 在这里我们先看一下需要创建的类和布局和需要添加的权限 ...
- mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法
要实现的效果和代码思路 简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现 最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的. ...
- Android 应用开机自启和无需权限开启悬浮框
开机自启主要自定义广播接收类,且需要在清单文件中注册,不要在代码中动态注册. <uses-permission android:name="android.permission.REC ...
- android 浮动文字提示,怎么在Android中实现一个自由拖动并显示文字的悬浮框
怎么在Android中实现一个自由拖动并显示文字的悬浮框 发布时间:2021-01-27 15:34:05 来源:亿速云 阅读:107 作者:Leah 今天就跟大家聊聊有关怎么在Android中实现一 ...
- php悬浮框,PopupWindow(悬浮框)的基本使用
本节引言:本节给大家带来的是最后一个用于显示信息的UI控件--PopupWindow(悬浮框),如果你想知道 他长什么样子,你可以打开你手机的QQ,长按列表中的某项,这个时候后弹出一个黑色的小 对话框 ...
最新文章
- NLP入门必知必会(一):Word Vectors
- VSS2005下载地址
- 汽车票销售系统mysql,jsp683客运汽车票网上售票系统mysql
- 点击编辑的时候如何绑定DropDownList
- Android Settings开发之修改
- 四阶显式Adams法求方程组C语言,第五讲第4章线性多步法(续
- 【Linux系统编程】Linux进程管理
- SAP Spartacus 4.0 源代码模式下开启 SSR,为什么会从本地去加载 all.css?
- 如何在没有 System.Drawing.Common 的情况下使用 C# 获取图片格式
- 深度优先搜索----poj 1321棋盘问题
- 阿里云盘小白羊版 v2.9.19 绿色版
- 数字图像处理--图像颜色
- Problem(三):工作中的记录。。。。
- yolo系列外文翻译_测评:英文文献、论文的翻译软件对比
- 北京2018网络赛 hihocoder#1828 : Saving Tang Monk II (BFS + DP +多开一维)
- lintcode:Search Insert Position 搜索插入位置
- 光(复振幅)在自由空间中传播的matlab仿真——傅里叶光学方法
- 用VBA破解Excel密码
- java中cbrt_JavaScript中带有示例的Math.cbrt()方法
- PHP 实现word在线预览
热门文章
- DNS解释问题:java.net.UnknownHostException
- JAVA ActiveMQ消息发送和接收
- Understanding Linux CPU Load - when should you be worried?
- Ajax (部分二:prototype.js代码后半部分)自己做的,总结页面向后台传Form值、单个值和后台向前台传一个或是一组值...
- 【mysql】全文索引match多列报错
- 如何插入一条记录获取插入后的自动增长ID列的方法.
- 关于安装VS2005或MSDN时遇到“Please insert the disk:XXXXXXX” 错误提示的解决方法!...
- C# DataTable 用法简介
- Linux 命令(11)—— col 命令
- Oracle数据库创建表空间