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+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
浅析JS运动
Dec 28 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
基于原生js实现九宫格算法代码实例
Jul 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Node.js的Express框架使用上手指南
2016/03/12 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
详谈js模块化规范
2017/07/07 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
python set集合使用方法解析
2019/11/05 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
J2EE相关知识面试题
2013/08/26 面试题
致跳高运动员广播稿
2014/01/13 职场文书
企业内部培训方案
2014/02/04 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript