poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等


Posted in Javascript onOctober 12, 2012

这种效果常常有两个需求

1 鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息
2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏
3 必须是自动关闭而不是手动关闭

通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦,
这个时候在遇到第二个需求,就很难搞定了,
做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那一段js,
博客园里面推荐的一堆tooltip 均不能满足3个要求,

找了老半天,在网上找了一个能用,

地址:http://demo.3water.com/js/2011/poshytip/demo/index.html
下载地址 https://3water.com/jiaoben/38747.html
不过这个js为了降低服务器压力,在密集使用时,会创建很多div,我优化了一点点,
代码如下

$.Poshytip = function(elm, options) { 
if( $(elm).data('Poshytipkeyint')!="1") 
{ 
$(elm).data('Poshytipkeyint','1') 
} 
else 
{ 
return; 
} 
this.$elm = $(elm); 
this.opts = $.extend({}, $.fn.poshytip.defaults, options); this.$tip = $(['<div class="',this.opts.className,'">', 
'<div class="tip-inner tip-bg-image"></div>', 
'<div class="tip-arrow tip-arrow-top tip-arrow-right tip-arrow-bottom tip-arrow-left"></div>', 
'</div>'].join('')).appendTo(document.body); 
this.$arrow = this.$tip.find('div.tip-arrow'); 
this.$inner = this.$tip.find('div.tip-inner'); 
this.disabled = false; 
this.content = null; 
this.init(); 
};
Javascript 相关文章推荐
javascript css styleFloat和cssFloat
Mar 15 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
详解javascript new的运行机制
Jan 26 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 #Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 #Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 #Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 #Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 #Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 #Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
使用pandas读取文件的实现
2019/07/31 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
领导干部考察材料
2014/02/08 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
《画风》教学反思
2014/04/16 职场文书
预防传染病方案
2014/06/14 职场文书
大学生简短的自我评价
2014/09/12 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis