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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
jQuery 选择器理解
Mar 16 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
10张动图学会python循环与递归问题
2021/02/06 Python
农药学硕士毕业生自荐信
2013/09/25 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
高中班主任评语大全
2014/04/25 职场文书
车辆工程专业求职信
2014/06/14 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
学生检讨书
2015/01/27 职场文书
个人年底工作总结
2015/03/10 职场文书
土建技术员岗位职责
2015/04/11 职场文书
敬老院活动感想
2015/08/07 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python