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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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/29 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js select option对象小结
2013/12/20 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
js实现自定义路由
2017/02/04 Javascript
koa-router源码学习小结
2018/09/07 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
Vue程序调试的方法
2019/06/17 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python字符串拼接六种方法介绍
2017/12/18 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
国旗下的演讲稿
2014/05/08 职场文书
公务员个人年终总结
2015/02/12 职场文书
歼十出击观后感
2015/06/11 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书