文档章节

jquery实现悬浮框

mrliuze
 mrliuze
发布于 2015/11/27 16:03
字数 599
阅读 62
收藏 0
点赞 0
评论 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
粉丝 13
博文 154
码字总数 11670
作品 0
浦东
程序员
分享10个帮助你实现超酷特效的jQuery插件

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

gbin1
2012/04/05
0
0
分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果

日期:2012/01/07 来源:GBin1.com 在线演示 本地下载 今天我们为大家介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后,当前的缩略图会放大,并且周围相邻的缩略图...

gbin1
2012/01/09
0
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
你应该知道的jQuery的小技巧

本文为翻译文章,原文在jquery-tips-everyone-should-know 回到顶部的按钮 通过使用jQuery中的 与 方法可以创建一个非常简易的带有平滑滚动的回到顶部的按钮: // Back to top$('a.top').cli...

Deacyn
2015/10/27
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
使用jQuery和CSS3创建一个支持翻转效果的微/轻博客网站列表

日期:2012-4-10 来源:GBin1.com 在线演示 本地下载 今天我们将使用页面元素的翻转效果设计一个微博和轻博网站列表,将使用jQuery的jQuery Flip插件来实现特效。 HTML代码 这里我们使用soc...

gbin1
2012/04/10
0
0
使用jQuery来实现菜单文字和图标动画效果

发布时间:2011/07/25 编译:Terry li - GBin1.com 原文:tympanus.net 今天我们将讲解如何使用jQuery创建一个鼠标悬浮后有动画效果的华丽菜单。主要的想法是使得某些元素幻灯消失,改变并且...

gbin1
2011/07/26
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
15分钟前
0
0
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
26分钟前
0
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
32分钟前
0
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
47分钟前
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
54分钟前
0
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
今天
0
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
今天
0
0
安装tensorflow-XXX报错

报错: tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this platform. 解决: wget https://bootstrap.pypa.io/get-pip.py sudo python2.7 get-pip.py sudo p......

Yao--靠自己
今天
0
0
JVM学习手册(一):JVM模型

一直从事JAVA开发,天天和JVM打交道,仔细想想对JVM还真的不是特别了解,实在是不应该.周六看了许多资料,也算有点心得,记录一下。 JVM内存模型分为5个区域:方法区,堆,虚拟机栈,本地方法栈,程序计...

勤奋的蚂蚁
今天
0
0
转行零基础该如何学Python?这些一定要明白!

转行零基础学Python编程开发难度大吗?从哪学起?近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大?今天,小编就来为大家详细解读一下这个问题。...

猫咪编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部