山寨新浪微博的用户名片（简易实现）

用到了namespace、lazyLoad等技巧

丢到tomcat/webapps/ROOT目录下就可以访问了

有疑问或者不满请在下方拍砖或QQ联系zuoming@wendui.com

附件下载

目录结构如下

app

|--js

|--commen.js

|--event.js

|--jquery-1.3.1.min.js

|--jsp

|--components

|--user

|--panel.jsp

|--WEB-INF

|--web.xml

|--default.html

common.js

var ZM;
if(!ZM)ZM = {};
/*** namespace support*/
ZM.ns = (function() {var fn = function(ns, callback) {if(!ns)throw 'namespace cannot be null';//use exsist meif(useNs(ns, callback)) {return;}ns = ns.split('.');var inc = fn._includes;do {var s = ns.shift();if(!inc[s]) {inc[s] = {};}inc = inc[s];} while(ns.length);callback.call(inc, inc);}fn._includes = {};var useNs = function(ns, callback) {try {var inc = eval('fn._includes.' + ns);if(inc) {callback.call(inc, inc);return true;}} catch(_) {}};return fn;
})();/*** require javascript file*/
ZM.require = (function() {function require(src, callback) {var script = document.createElement("script");if(script.addEventListener)script.addEventListener("load", callback, false);else if(script.attachEvent)script.attachEvent("onreadystatechange", function() {callbackIE(callback);});script.src = src;document.getElementsByTagName("head")[0].appendChild(script);}//damn it IE!var callbackIE = function(callback) {var target = window.event.srcElement;if(target.readyState == "loaded")callback.call(target);};return require;
})();/*** lazy load javascript and eval* @param url* @param params (optional) an Object or a params getter function* @param success callback*/
ZM.lazy = (function($) {var lz = function(uri, params, success) {if(typeof params == 'function'){if(!success)success = params;elseparams = params();}$.ajax({url : ZM.PATH+uri,dataType : "script",data: params,success : function(txt){var fn = eval(txt);success(fn);},error: function(){throw 'the uri "'+uri+'" was not found';}});};lz._files = {};return lz;
})(jQuery);//
//                                              //
//                  components                  //
//                                              //
//ZM.ns('zm', function(){/*** absolute layer*/this.Layer = (function(){var ly = function(){var me = this;//replace default config$.extend(me, arguments[0]);//renderme.dom = me.renderer();me.dom.appendTo(me.renderTo);if(me.autoShow)me.show();me.ready();};ly.prototype = {uri: null,params: null,content: null,autoShow: false,renderTo: 'body',renderer: function(){
var s = '\
<div class="-ly mBlogLayer" style="position:absolute; display:none;">\<div class="layerBox">\<a style="position:absolute; top:5px; right:5px;" class="-ly-x" href="javascript:void(0);">x</a>\<div class="-ly-b"></div>\</div>\
</div>';var me = this, dom = $(s), b = dom.find('div.-ly-b');//static contentif (me.content){b.append(me.content);}//dynamic contentelse if (me.uri){ZM.lazy(me.uri, me.params, function(Component){b.append(new Component().dom);});}elsethrow '"content" or "uri" must specify one';return dom;},ready: function(){var me = this;me.dom.find('a.-ly-x:first').click(function(){me.destroy();});},destroy: function(){this.dom.remove();}};return ly;})();});

events.js

(function() {var tmr;/*** when mouse over a "a[namecard]" then show the user card*/$('a[namecard]').live('mouseover', function(){clearTimeout(tmr);var u = $(this);tmr = setTimeout(function(){//get or create the namecard and display itgetNameCard(u, function(ly){ly.dom.show();});}, 400);})/*** when mouse out a "a[namecard]" then destroy the user card*/.live('mouseout', function() {clearTimeout(tmr);var u = $(this);tmr = setTimeout(function() {destroyNameCard(u);}, 400);});//get or create the namecardfunction getNameCard(link, callback) {var u = $(link), ly = u.data('namecard');//if the card is exists then return itif(ly){callback(ly);return;}//use zm.Layer namespaceZM.ns('zm.Layer', function(Layer) {//if the card is not exists then create itly = new Layer({uri : '/jsp/components/user/panel.jsp',params : {id : u.attr('uid')}});ly.dom//when mouse over then clear the Hide timeout.mouseover(function(){clearTimeout(tmr);})//when mouse out then hide the Layer.mouseout(function() {tmr = setTimeout(function(){destroyNameCard(u);}, 400);});//bind data with the layeru.data('namecard', ly);//returncallback(ly);});}function destroyNameCard(link) {var u = $(link), ly = u.data('namecard');u.removeData('namecard');ly.destroy();}})();

panel.jsp

/* User Panel */
/*
<%@page contentType="text/html; charset=UTF-8"%>
<%
java.util.HashMap user = new java.util.HashMap();
user.put("name", request.getParameter("id"));
user.put("name", "姚晨");
user.put("addr", "北京，朝阳区");
%>
*/;(function(){var Panel = function(){this.dom = this.renderer();};Panel.prototype = {//此处HTML原封不动的引用了新浪微博的HTML代码renderer: function(){
var s = '\
<div class="name_card"><div class="layerArrow"></div><div>\
<dl class="name clearFix">\<dt><a href="http://weibo.com/yaochen" target="_blank"><img src="http://tp2.sinaimg.cn/1266321801/50/5601436643/0" class="picborder_r" imgtype="head" title="<%=user.get("name")%>" uid="<%=user.get("id")%>"></a></dt>\<dd class="name_card_con0"><a href="http://weibo.com/yaochen" title="<%=user.get("name")%>" uid="1266321801" target="_blank"><%=user.get("name")%><img class="small_icon vip" src="http://img.t.sinajs.cn/t35/style/images/common/transparent.gif" title="" alt=""></a><span>(<a href="#">设置备注</a>)</span>\<p class="address"><%=user.get("addr")%><img src="http://img.t.sinajs.cn/miniblog2style/images/common/transparent.gif" class="small_icon sicon_female" title="女"></p>\<p class="name_card_con4"><span><a href="http://weibo.com/1266321801/follow" title="668" target="_blank">关注</a>668</span><i>|</i><span><a href="http://weibo.com/1266321801/fans" title="9884708" target="_blank">粉丝</a>988万</span><i>|</i><span><a href="http://weibo.com/yaochen" title="4061" target="_blank">微博</a>4061</span></p>\</dd>\
</dl>\
<dl class="info clearFix">\
<dt>简介：</dt>\
<dd><p class="gray6" title="演员，代表作电视剧《武林外传》《潜伏》电影《爱出色》等">演员，代表作电视剧《武林外传》《潜伏》电影《爱出色》等</p></dd>\
</dl>\<dl class="info medal clearFix">\<dt>勋章：</dt>\<dd class="xz_listZ">\<a title="舌战群儒" href="http://badge.weibo.com/1266321801?mid=101&source=5"><img alt="舌战群儒" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey4g0zyng.gif"></a>\<a title="微博控" href="http://badge.weibo.com/1266321801?mid=297&source=5"><img alt="微博控" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey1cexyvg.gif"></a>\<a title="语惊四座" href="http://badge.weibo.com/1266321801?mid=98&source=5"><img alt="语惊四座" src="http://ww2.sinaimg.cn/thumbnail/62015b43tw1diey5cvhkbg.gif"></a>\<a title="谈笑风生" href="http://badge.weibo.com/1266321801?mid=8&source=5"><img alt="谈笑风生" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diexyf3yx1g.gif"></a>\<a title="如来神掌" href="http://badge.weibo.com/1266321801?mid=178&source=5"><img alt="如来神掌" src="http://ww3.sinaimg.cn/thumbnail/62015b43tw1diexy5d6wog.gif"></a>\<a title="呼风唤雨" href="http://badge.weibo.com/1266321801?mid=2&source=5"><img alt="呼风唤雨" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1dieykse1ung.gif"></a>\</dd>\</dl>\<div class="links">\<div class="MIB_btn2 rt">已关注<span class="MIB_line_sp">|</span><a class="MIB_linkbl" href="javascript:void(0)"><em>取消</em></a></div>\<span class="name_card_con3" style="display:none"><i class="com_mess"> </i><a href="javascript:void(0)">设置分组</a></span>\</div>\</div>\
</div>';return $(s);}};return Panel;
})();

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="http://img.t.sinajs.cn/t35/style/css/common/index.css?version=20110722204414" type="text/css" rel="stylesheet"><link href="http://img.t.sinajs.cn/t35/style/css/common/layer.css?version=20110722204414" type="text/css" rel="stylesheet"><script src="js/jquery-1.3.1.min.js" type='text/javascript'></script><script src="js/common.js" type='text/javascript'></script><script>ZM.PATH = ''; //example ZM.require('/js/events.js');</script></head><body><ol><li><a namecard="true" uid="1266321801" href="http://weibo.com/yaochen" action-type="namecard" action-data="uid=1266321801&name=&reason=&type=&direction=auto&urltype=usercard&pageid=myprofile&param=type###uid###name###reason###pageid"><img title="姚晨" uid="1266321801" imgtype="head" src="http://tp2.sinaimg.cn/1266321801/50/5601436643/0"></a></li></ol></body>
</html>

山寨新浪微博的用户名片（简易实现）相关推荐

python简单的小程序_Python简单小程序---名片简易系统
Python简单小程序---名片简易系统主程序功能代码 import cards_tools while True: cards_tools.show_meun() action = int(inp ...
山寨新浪微博客户端与新浪微博API调用的总结
这次是我第一次写的项目总结,虽然这只是一个小项目,但确实是获益良多.虽然说是独立完成,但其实在做的过程中,也有和大家交流了很多意见.尽管如此,我对这个尚不能算写好的项目,还是有非常多的不满意.不过碍于 ...
利用jQuery实现用户名片小动画
我爱撸码,撸码使我感到快乐! 大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮 ...
新浪微博注册用户超3亿六成活跃者使用移动端
第一幅图证明了进一步证明了Iphone是街机中的街机.第二幅图告诉了你想要更多人的看到你的微博,那就吃饭时,睡觉时发布吧~~:) 5月15日午间消息,新浪微博事业部副总经理芦义在第四届GMIC全球移动 ...
用户名片 3：页面实现
前言通过前两篇的学习,我们实现了用户名片的设置和读取功能,其中包括图片的上传.压缩及存储在 Nginx 服务器上.本篇我们将在前端实现用户名片的设置和读取,并在不同的场景中分别获取头像的缩略图和原图 ...
jquery,bootstrap实现的用户名片信息提示
原文:jquery,bootstrap实现的用户名片信息提示源代码下载地址:http://www.zuidaima.com/share/1737371579649024.htm 鼠标移动到头像上时提 ...
Android授权登录新浪微博获取用户个人信息
转载请注明出处:http://blog.csdn.net/u010214991/article/details/49149793 记得第一次发博文的时候我写了一篇文章,题为" Android ...
新浪微博注册用户突破2亿，腾讯微博注册用户 2.33 亿
根据新浪科技,今天新浪公布了 2011 年第二季度财报,净营收 1.19 亿美元,新浪 CEO 曹国伟表示,"运营不到 2 年时间,新浪微博已经成为网络现象级应用,注册用户数前不久前突破了 ...
android 从新浪微博获取用户信息,Android授权登录新浪微博获取用户个人信息
Android授权登录新浪微博获取用户个人信息 Android授权登录新浪微博获取用户个人信息一.准备工作我们都知道,无论是分享到新浪微博,还是获取新浪微博的用户信息,都离不开一样东西,那就是新 ...

山寨新浪微博的用户名片（简易实现）

山寨新浪微博的用户名片（简易实现）相关推荐

最新文章

热门文章