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+css+html实现页面遮罩弹出框
Mar 21 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
详解iframe与frame的区别
Jan 13 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
JS简单实现数组去重的方法分析
Oct 14 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 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
抓取YAHOO股票报价的类
2009/05/15 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
python 写入csv乱码问题解决方法
2016/10/23 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
教育科研先进个人材料
2014/01/26 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS