分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip
2012-10-03 16:35
681 查看
大家国庆快乐!
这种效果常常有两个需求
1鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息
2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏
3必须是自动关闭而不是手动关闭
例如:
通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦,
这个时候在遇到第二个需求,就很难搞定了,
做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那一段js,
博客园里面推荐的一堆tooltip均不能满足3个要求,
找了老半天,在网上找了一个能用,
地址:http://vadikom.com/demos/poshytip/
不过这个js为了降低服务器压力,在密集使用时,会创建很多div,我优化了一点点,
代码如下
[code]if($(elm).data('Poshytipkeyint')!="1")
[/code]
这样一个对象创建一个div,但是一个对象出现5次时仍然会创建5个div
这个应该还有进一步优化的空间,网高手放出自己的js,或这个优化优化
这种效果常常有两个需求
1鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息
2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏
3必须是自动关闭而不是手动关闭
例如:
通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦,
这个时候在遇到第二个需求,就很难搞定了,
做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那一段js,
博客园里面推荐的一堆tooltip均不能满足3个要求,
找了老半天,在网上找了一个能用,
地址:
不过这个js为了降低服务器压力,在密集使用时,会创建很多div,我优化了一点点,
代码如下
$.Poshytip=function(elm,options){
[code]if($(elm).data('Poshytipkeyint')!="1")
{
$(elm).data('Poshytipkeyint','1')
}
else
{
return;
}
this.$elm=$(elm);
this.opts=$.extend({},$.fn.poshytip.defaults,options);
this.$tip=$(['<divclass="',this.opts.className,'">',
'<divclass="tip-innertip-bg-image"></div>',
'<divclass="tip-arrowtip-arrow-toptip-arrow-righttip-arrow-bottomtip-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();
};
[/code]
这样一个对象创建一个div,但是一个对象出现5次时仍然会创建5个div
这个应该还有进一步优化的空间,网高手放出自己的js,或这个优化优化
相关文章推荐
- poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
- 分享一个jquery插件-poshytip(模仿显示微博人的图像)
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 分享一个比lightbox配置更方便的web2.0图片显示jQuery插件:Topup
- 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
- 分享一个自己做的用于文本插入的jquery插件
- jQuery 选择文字显示操作框插件,可用于分享文字到各大社区。
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- 自定义Jquery插件——由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件
- 分享一个仅0.7KB的jQuery文本框输入提示插件
- Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件
- 基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
- 分享一个比lightbox配置更方便的jQuery web2.0图片显示插件:Topup
- Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
- Jquery插件分享之气泡形提示控件grumble.js
- TimeSheet:一个用于时间规划的jQuery插件
- jquery 插件 自定义鼠标提示效果 jquery.toolTip
- 一个图像放大功能的jquery插件:fancybox
- JQuery实现一个简单的鼠标跟随提示效果