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的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
Vue事件修饰符native、self示例详解
Jul 09 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 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 引用文件技巧
2010/03/02 PHP
php开发环境配置记录
2011/01/14 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
微信JS接口大全
2016/08/25 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
Python中optparse模块使用浅析
2015/01/01 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
业务主管岗位职责范本
2013/12/25 职场文书
村委会主任先进事迹
2014/01/15 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
留学自荐信写作方法
2014/01/27 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
文明班级建设方案
2014/05/15 职场文书
医院病假条怎么写
2015/08/17 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书