zoukankan      html  css  js  c++  java
  • 分享一个jquery插件主要用于显示微博人的图像和鼠标提示等poshytip

    大家国庆快乐!

    这种效果常常有两个需求

    1 鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息

    2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏

    3 必须是自动关闭而不是手动关闭

    例如:

    微博桌面截图_20121003162722

    通常第一个比较容易满足,但是第一个在遇到事件冒泡时,搞起来也比较麻烦,

    这个时候在遇到第二个需求,就很难搞定了,

    做微博APP时,常常要显示人的个人信息,想吧新浪或腾讯的那个js弄过来吧,搞了半天没找见是那一段js,

    博客园里面推荐的一堆tooltip 均不能满足3个要求,

    找了老半天,在网上找了一个能用,

    地址:http://vadikom.com/demos/poshytip/

    不过这个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();
        };

    这样一个对象创建一个div,但是一个对象出现5次时仍然会创建5个div

    这个应该还有进一步优化的空间,网高手放出自己的js,或这个优化优化

  • 相关阅读:
    Java描述设计模式(18):享元模式
    Java描述设计模式(17):调停者模式
    微服务架构案例(06):通过业务、应用、技术、存储方面,聊聊架构
    微服务架构案例(05):SpringCloud 基础组件应用设计
    微服务架构案例(04):中间件集成,公共服务封装
    微服务架构案例(03):数据库选型简介,业务数据规划设计
    微服务架构案例(02):业务架构设计,系统分层管理
    Java描述设计模式(16):代理模式
    讲解mybaits的标签语法
    java程序设计原则
  • 原文地址:https://www.cnblogs.com/qqloving/p/2710921.html
Copyright © 2011-2022 走看看