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核心支持代码分享
May 23 Javascript
JS字符串截取函数实例
Dec 27 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
基于JS实现视频上传显示进度条
May 12 Javascript
vue实现打地鼠小游戏
Aug 21 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php学习笔记之 函数声明
2011/06/09 PHP
详解PHP归并排序的实现
2016/10/18 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
js实现拖拽效果
2015/02/12 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
vue axios用法教程详解
2017/07/23 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
介绍Python中内置的itertools模块
2015/04/29 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python flask安装和命令详解
2019/04/02 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python中p-value的实现方式
2019/12/16 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
总经理助理的八要求
2013/11/12 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
文明单位汇报材料
2014/12/24 职场文书
亲属关系公证书样本
2015/01/23 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL