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打印纸函数代码(递归)
Jun 18 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
layui选项卡效果实现代码
May 19 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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/09/04 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
节水口号标语
2014/06/19 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
php将xml转化对象的实例详解
2021/11/17 PHP
python自动化测试之Selenium详解
2022/03/13 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python