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 面向对象思想 附源码
Jul 07 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
初探nodeJS
2017/01/24 NodeJs
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python requests指定出口ip的例子
2019/07/25 Python
python实现3D地图可视化
2020/03/25 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
项目经理岗位职责
2013/11/11 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
运动会入场词200字
2014/02/15 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
保密工作责任书
2014/04/16 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
如何使用pdb进行Python调试
2021/06/30 Python