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优先加载笔记代码
Sep 30 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
微信小程序开发技巧汇总
Jul 15 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.MVC的模板标签系统(五)
2006/09/05 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
php后门URL的防范
2013/11/12 PHP
php数组指针操作详解
2017/02/14 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
python flask实现分页的示例代码
2018/08/02 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
经典C++面试题一
2016/11/06 面试题
毕业自我鉴定范文
2013/11/06 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
暑假安全保证书
2015/02/28 职场文书
小学运动会加油词
2015/07/18 职场文书