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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JS画线(实例代码)
Nov 20 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
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 中的一些经验积累
2006/10/09 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
教师演讲稿范文
2014/01/08 职场文书
迎接领导欢迎词
2014/01/11 职场文书
《都江堰》教学反思
2014/02/07 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
微信营销策划方案
2014/02/24 职场文书
银行服务感言
2014/03/01 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
师德承诺书
2015/01/20 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
家电创业计划书
2019/08/05 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python
LeetCode189轮转数组python示例
2022/08/05 Python