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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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之第二天
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
详解Python中的路径问题
2020/09/02 Python
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
清明节演讲稿
2014/05/27 职场文书
英语分层教学实施方案
2014/06/15 职场文书
少先队工作总结2015
2015/05/13 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL