开发者社区> 源码下载> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ThinkBox仿thinkphp头像名片

简介: 演示效果参考:http://www.erdangjiade.com/js/869.html 下面是两个头像,只要给.avatar加上user_id即可在其右侧出现名片弹出层。
+关注继续查看

演示效果参考:http://www.erdangjiade.com/js/869.html

下面是两个头像,只要给.avatar加上user_id即可在其右侧出现名片弹出层。

<div class="avatar" user_id="365"> 
    <a href="http://www.erdangjiade.com/" target="blank" title="进入二当家的的主页"><img src="images/80_80.gif" /></a> 
</div>  
<div class="avatar" user_id="520"> 
    <a href="http://www.erdangjiade.com/js" target="blank" title="进入特效的主页"><img src="http://www.erdangjiade.com/Public/images/logo.png" /></a> 
</div>

ThinkBox名片插件调用方法

//所有头像绑定ajax获取名片 
var ajaxGetCard; 
var timeout; 
 
$(document).delegate('.avatar,.ThinkBox-wrapper''mouseenter'function(event) { 
    //延迟执行鼠标移除事件 
    clearTimeout(timeout); 
    var ele = $(this); 
    var user_id = ele.attr('user_id'); 
    if (user_id == undefined{ 
        return false; 
    } 
 
    //获取当前元素的位置,计算弹出框位置 
    var ele_l = ele.offset().left; 
    var ele_t = ele.offset().top; 
    var x = ele_l + 53; 
    var y = ele_t; 
 
    //如果已经加载过了,则直接显示 
    var card = ele.find('.card-box'); 
    if (card.html() != null) { 
        box = $.ThinkBox( 
                card.get(0).outerHTML, 
                { 
                    'fixed': false, 
                    'center': false, 
                    'unload': true, 
                    'close''', 
                    'dataEle''', 
                    'style''', 
                    'x': x, 
                    'y': y, 
                    'modal': false 
                } 
        ); 
    } else { 
        ajaxGetCard = $.get('ajax.php'{'uid': user_id}, 
        function(data) { 
            box = $.ThinkBox( 
                    data, 
                    { 
                        'fixed': false, 
                        'onload': true, 
                        'center': false, 
                        'close''', 
                        'dataEle''', 
                        'style''', 
                        'x': x, 
                        'y': y, 
                        'modal': false 
                    } 
            ); 
            ele.append(data); 
            ele.find('.card-box').hide(); 
        }); 
    } 
    event.stopPropagation(); 
}).delegate('.avatar,.ThinkBox-wrapper''mouseleave'function(event) { 
    var user_id = $(this).attr('user_id'); 
    if (user_id == undefined && $(this).attr('class') != 'ThinkBox-wrapper ThinkBox-'{ 
        return false; 
    } 
    ajaxGetCard.abort(); 
    //延迟执行鼠标移除事件 
    timeout = setTimeout("$('.ThinkBox-wrapper').remove();"30); 
    event.stopPropagation(); 
});
二当家的官网,请访问 http://www.erdangjiade.com

      更多商城企业源码,尽在 http://www.erdangjiade.com/source

       更多原创模板,尽在 http://www.erdangjiade.com/templates  

          网页特效下载:www.erdangjiade.com/js

      PHP/Mysql:www.erdangjiade.com/php
     
       网站开发求职QQ群 368848856

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
thinkphp跨域,tp5跨域
thinkphp跨域,tp5跨域
7 0
ThinkPHP6获取器没有触发
ThinkPHP6获取器没有触发
7 0
ThinkPHP6获取器没有触发
ThinkPHP6获取器没有触发
92 0
ThinkPHP 3使用OSS
ThinkPHP 3使用OSS示例。
2521 0
ThinkPHP 5使用OSS
ThinkPHP 5使用OSS示例。
5036 0
ThinkPHP中的分表使用
数据分表对于大数据量的应用,经常会对数据进行分表,有些情况是可以利用数据库的分区功能,但并不是所有的数据库或者版本都支持,因此我们可以利用ThinkPHP内置的数据分表功能来实现。
1067 0
thinkPHP实现瀑布流的方法
thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 这篇文章主要介绍了thinkPHP实现瀑布流的方法,实例讲述了瀑布流插件的应用以及对应的HTML与Action代码,是非常实用的技巧,需要的朋友可以参考下       本文实例讲述了thinkPHP实现瀑布流的方法。
1330 0
Thinkphp框架实战入门(自学第一课)
学习ThinkPHP的第一步:0、前提,下载安装xampp,运行apache和mysql服务。1、下载ThinkPHP的核心包,解压到D:\xampp\htdocs\,可以看到是一个名字为ThinkPHP的文件夹,在当前目录下新建一个文件夹myapp,并剪切ThinkPHP到myapp下,这样就安装好了框架并准备开发应用了。
954 0
+关注
源码下载
本人二当家的,性温和,擅代码,好技术,人谓代码狗,程序猿;河南商丘人氏也,现居上海,曾先后创办,上海什尔网络科技,上海红苹果电脑科技有限公司,上海素商网络科技等;自毕业即誓言:定要搞网络,携思科、华为等路由、交换机以定天下;初涉江湖,身不由己,期间,曾开过水果店,熟食店,亦开过淘
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载