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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
轮播图组件js代码
Aug 08 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
vue+elementUI实现简单日历功能
Sep 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封装的mongodb操作类代码
2017/08/06 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
Js 中debug方式
2010/02/07 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
几种实用的pythonic语法实例代码
2018/02/24 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
Python用Jira库来操作Jira
2020/12/28 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
银行演讲稿范文
2014/01/03 职场文书
酒店营销策划方案
2014/02/07 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
原材料检验岗位职责
2014/03/15 职场文书
指导教师评语
2014/04/26 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
三孔导游词
2015/02/05 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书