csdn论坛头像效果

童登达 2011-09-10 06:30:18
我们在看贴的时候，鼠标移动到头像上会弹出层，提示会员信息。层会有一个箭头指向头像。这种效果怎么做啊？谁有这方面的资料，麻烦提示一下，谢谢！！！
...全文
176 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
H3c7nj8e 2014-03-01
  • 打赏
  • 举报
 回复
学习了 我想找的是怎么我上传头像了 CSDN论坛的头像还是没变呢?
碧海情天-赵亮 2011-09-12
  • 打赏
  • 举报
 回复
是啊，代码就在页面里都懒得去看。
baillluu 2011-09-12
  • 打赏
  • 举报
 回复
虽然没做过，但是可以想想得到，一定是鼠标获得焦点，与鼠标离开焦点事件！
clickgenius 2011-09-11
  • 打赏
  • 举报
 回复
学习。。。。。
挨踢直男 2011-09-10
  • 打赏
  • 举报
 回复 
<div id="l">

<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg" onmouseover="func1(this)" onmouseout="func2(this)" id="img1" />

</div>

<br/>

<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img2" />

</div>

<br/>



<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img3" />

</div>

<br/>



<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img4" />

</div>

<br/>



<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img5" />

</div>

<br/>



<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img6" />

</div>

<br/>



<div>

<img src="http://avatar.profile.csdn.net/7/2/2/2_wolfnation001.jpg"  onmouseover="func1(this)" onmouseout="func2(this)" id="img7" />

</div>

<br/>

</div>

<script type="text/javascript">



function func1(t)

{

        if(document.getElementById(t.id+"_pop"))

		    return

			//document.body.removeChild(document.getElementById(t.id+"_pop"))

		var left = t.offsetLeft+t.offsetWidth/2

		var top = t.offsetTop

		var img = document.createElement("img")

		img.src = "http://topic.csdn.net/u/ui/styles/default/topic/bgUserCard.gif";

		img.id = t.id+"_pop"

		img.style.position="absolute"

		img.style.left = left+"px"

		img.style.top = top+"px"

		img.onmouseout = function(e)

		{

            var e = e || window.event;

		    var to = e.relatedTarget || e.toElement;		

			if(to != t) document.body.removeChild(this)

		}

		document.body.appendChild(img)

}

function func2(t)

{

        var e = func2.caller.arguments[0] || window.event;

		var to = e.relatedTarget || e.toElement;

		var pop = document.getElementById(t.id+"_pop");

		if(pop && pop != to) document.body.removeChild(pop)

}



</script>
孟子E章 2011-09-10
  • 打赏
  • 举报
 回复
当然，你可以进行简化。设置显示、隐藏div即可
孟子E章 2011-09-10
  • 打赏
  • 举报
 回复

CsdnUserCard.prototype.close = function() {
this.div_card.style.display = "none";
if (typeof this.onclose == "function") this.onclose(this);
}

CsdnUserCard.prototype.show = function(left, top, username, face) {
this.username = username;
this.a_face.href = "http://hi.csdn.net/" + username;
this.a_space.href = "http://hi.csdn.net/" + username;
this.a_addFriend.href = "http://webim.csdn.net/AddFriends/" + username + ".ashx";
//this.a_message.href = "http://webim.csdn.net/Messages/" + username + ".ashx";
this.a_blog.href = "http://blog.csdn.net/" + username;
this.a_username.href = "http://hi.csdn.net/" + username;
this.a_nickname.href = "http://hi.csdn.net/" + username;
this.a_more.href = "https://forum.csdn.net/PointForum/Forum/UserTopicList.aspx?user=" + username;
var userCard = this;
if (!CsdnUserCard.userInfos[username]) {
for (var i = 0; i < 3; i++)
this.li_topics[i].style.display = "none";
callScript("https://forum.csdn.net/PointForum/UserCard.ashx?user=" + username, function() {
userCard.doUserChange(username);
});
}
else this.doUserChange(username);
this.div_card.style.left = left + "px";
this.div_card.style.top = top + "px";
this.div_card.style.display = "";
this.a_username.innerHTML = username;
this.img_face.src = face;
}

CsdnUserCard.prototype.doUserChange = function(username) {
if (this.username != username) return;
if (!CsdnUserCard.userInfos[username]) return;
this.a_nickname.innerHTML = CsdnUserCard.userInfos[username].nickname;
for (var i = 0; i < 3; i++) {
if (CsdnUserCard.userInfos[username].topicList[i]) {
this.a_topics[i].href = CsdnUserCard.userInfos[username].topicList[i].url;
var text = CsdnUserCard.userInfos[username].topicList[i].text;
text = text.replace(/\s \s/g, " ").replace(/</g, "<").
replace(/>/g, ">").replace(/"ed;/g, '"');
this.a_topics[i].innerHTML = text.match(/^[\s\S]{1,12}/)[0].replace(/[<>" ]/g, function($0) {
return {
"<": "<",
">": ">",
" ": " "
}[$0];
});
/*this.a_topics[i].innerHTML = text.replace(
/^(.{12})(.*?)$/, "$1…").replace(/@/g, '＠').replace(/&(?![a-z]+;)/g, '＆');*/
this.a_topics[i].title = text;

this.li_topics[i].style.display = "";
} else this.li_topics[i].style.display = "none";
}
}

CsdnUserCard.userInfos = {};

function UserCardCallback(json) {
if (typeof json == "undefined" || !json.username) return;
CsdnUserCard.userInfos[json.username] = json;
}

var currentUserCard = null;
/*
addEventHandler(window, "load", function() {
currentUserCard = new CsdnUserCard();
});
孟子E章 2011-09-10
  • 打赏
  • 举报
 回复
其实就是一个写好的层，鼠标移动过来显示层，箭头就是图片。你查看源代码就可以看到了。
csdn的代码
function showUserCard(sender, username) {
if (!window.loaded) return; // 未加载
if (!currentUserCard) {
//if (!panelTopicAdmin) return;
currentUserCard = new CsdnUserCard(); //*/
}
var point = absolutePoint(sender);
currentUserCard.owner = sender;
currentUserCard.show(point.x + 65, point.y, username, sender.src);
currentUserCard.mouseover = function(e) {
var element = typeof event != "undefined" ? event.srcElement : e.target;
var hotCard = false;
while (element) {
hotCard = element == currentUserCard.owner || element == currentUserCard.div_card;
if (hotCard) break;
element = element.parentNode;
}
if (!hotCard) {
removeEventHandler(document, "mouseover", currentUserCard.mouseover);
currentUserCard.close();
}
}
addEventHandler(document, "mouseover", currentUserCard.mouseover);
}

function absolutePoint(element) {
var result = {
x: element.offsetLeft,
y: element.offsetTop
};
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
}

function CsdnUserCard() {
this.hot = false;

this.div_card = document.createElement("div");
with(this.div_card.style) {
borderStyle = "none";
borderWidth = "0";
display = "none";
width = "357px";
height = "194px";
position = "absolute";
textAlign = "left";
background = "transparent url(/u/ui/styles/default/topic/bgUserCard.gif) no-repeat scroll 0 0";
fontFamily = "Verdana,Arial,Helvetica,sans-serif";
}
this.div_card.card = this;
document.body.appendChild(this.div_card);

this.table_card = document.createElement("table");
with(this.table_card.style) {
top = "12px";
left = "56px";
position = "relative";
width = "290px";
}
this.table_card.cellSpacing = "0";
this.table_card.cellPadding = "0";
this.table_card.border = "0";
this.div_card.appendChild(this.table_card);

this.tr_card = this.table_card.insertRow(-1);
this.td_left = this.tr_card.insertCell(-1);
with(this.td_left.style) {
lineHeight = "170%";
textAlign = "center";
verticalAlign = "top";
width = "80px";
}
this.a_face = document.createElement("a");
this.a_face.target = "_blank";
this.a_face.title = "进入个人空间";
this.a_face.style.color = "#01359D";
this.a_face.target = "_blank";
this.td_left.appendChild(this.a_face);

this.td_right = this.tr_card.insertCell(-1);
with(this.td_right.style) {
lineHeight = "170%";
textAlign = "left";
verticalAlign = "top";
}

this.img_face = document.createElement("img");
this.a_face.appendChild(this.img_face);
with(this.img_face.style) {
border = "1px solid #5B7790";
width = "70px";
}

this.br_face = document.createElement("br");
this.td_left.appendChild(this.br_face);

this.a_space = document.createElement("a");
this.a_space.innerHTML = "个人空间";
this.a_space.title = "进入个人空间";
this.a_space.target = "_blank";
this.td_left.appendChild(this.a_space);
with(this.a_space.style) {
color = "#01359D";
textDecoration = "none";
verticalAlign = "middle";
}

this.br_space = document.createElement("br");
this.td_left.appendChild(this.br_space);

this.a_addFriend = document.createElement("a");
this.a_addFriend.target = "_blank";
this.a_addFriend.title = "加为好友";
this.td_left.appendChild(this.a_addFriend);

this.img_addFriend = document.createElement("img");
this.img_addFriend.src = "http://c.csdn.net/bbs/f/i/blank.gif";
this.a_addFriend.appendChild(this.img_addFriend);

with(this.img_addFriend.style) {
background = "transparent url(/u/ui/styles/default/topic/addFriend.gif) no-repeat scroll 0 0";
height = "17px";
marginBottom = "5px";
width = "61px";
border = "medium none";
}

this.br_addFriend = document.createElement("br");
this.td_left.appendChild(this.br_addFriend);

/*
this.a_message = document.createElement("a");
this.a_message.target = "_blank";
this.a_message.title = "发消息";
this.td_left.appendChild(this.a_message);

this.img_message = document.createElement("img");
this.img_message.src = "http://c.csdn.net/bbs/f/i/blank.gif";
this.a_message.appendChild(this.img_message);

with (this.img_message.style) {
background = "transparent url(/u/ui/styles/default/topic/sendIMMsg.gif) no-repeat scroll 0 0";
height = "17px";
marginBottom = "5px";
width = "61px";
border = "medium none";
}

this.br_message = document.createElement("br");
this.td_left.appendChild(this.br_message);
*/

this.a_blog = document.createElement("a");
this.a_blog.target = "_blank";
this.a_blog.title = "浏览博客";
this.td_left.appendChild(this.a_blog);

this.img_blog = document.createElement("img");
this.img_blog.src = "http://c.csdn.net/bbs/f/i/blank.gif";
this.a_blog.appendChild(this.img_blog);

with(this.img_blog.style) {
background = "transparent url(/u/ui/styles/default/topic/goBlog.gif) no-repeat scroll 0 0";
height = "17px";
marginBottom = "5px";
width = "61px";
border = "medium none";
}

this.span_username = document.createElement("span");
this.span_username.innerHTML = "帐号：";
this.td_right.appendChild(this.span_username);

this.a_username = document.createElement("a");
with(this.a_username.style) {
color = "#01359D";
fontStyle = "normal";
textDecoration = "none";
}
this.td_right.appendChild(this.a_username);

this.br_nickname = document.createElement("br");
this.td_right.appendChild(this.br_nickname);

this.span_nickname = document.createElement("span");
this.span_nickname.innerHTML = "昵称：";
this.td_right.appendChild(this.span_nickname);

this.a_nickname = document.createElement("a");
this.a_nickname.innerHTML = "载入中...";
with(this.a_nickname.style) {
color = "#01359D";
fontStyle = "normal";
textDecoration = "none";
}
this.td_right.appendChild(this.a_nickname);

this.br_nickname = document.createElement("br");
this.td_right.appendChild(this.br_nickname);

this.span_topics = document.createElement("span");
this.span_topics.innerHTML = "最新帖子：";
this.td_right.appendChild(this.span_topics);

this.br_topics = document.createElement("br");
this.td_right.appendChild(this.br_topics);

this.ol_topics = document.createElement("ol");
this.td_right.appendChild(this.ol_topics);

this.li_topics = {};
this.a_topics = {};
for (var i = 0; i < 3; i++) {
this.li_topics[i] = document.createElement("li");
this.li_topics[i].style.listStyleType = "decimal";
this.a_topics[i] = document.createElement("a");
this.a_topics[i].target = "_blank";
with(this.a_topics[i].style) {
color = "#01359D";
textDecoration = "none";
}
this.li_topics[i].appendChild(this.a_topics[i]);
this.li_topics[i].style.display = "none";
this.ol_topics.appendChild(this.li_topics[i]);
}

this.a_more = document.createElement("a");
this.a_more.innerHTML = "更多帖子...";
this.a_more.title = "浏览更多发帖";
this.a_more.target = "_blank";
this.td_right.appendChild(this.a_more);

with(this.a_more.style) {
marginLeft = "90px";
color = "#01359D";
fontStyle = "normal";
textDecoration = "none";
}
}
krqw 2011-09-10
  • 打赏
  • 举报
 回复
学习了。。
CSDN头像预览效果
CSDN头像预览效果
Android 仿京东金融首页头像效果
博客地址：http://blog.csdn.net/kong_gu_you_lan/article/details/54882650
android修改头像
从本地相册选择图片裁剪，或者拍照后裁剪，实现修改头像功能。做了兼容性处理。详细效果：https://blog.csdn.net/gengbaolong/article/details/84668216。
Android项目源码在线音乐播放器圆形旋转头像
本项目是一个在线音乐播放器项目源码，功能上实现了网络资源获取和解析，主界面还可以，歌曲播放页面还没做，界面有虚化背景，圆形旋转头像等效果。 CSDN_blog: http://blog.csdn.net/xiaole0313 GitHub :https://github.com/xiaole0310 /** * 微信公众号：ysle_0313 * Email：ysle0313@gmail.com * QQ:1733563441 * 技术Q群：279126311 */
android图片凸出效果
图片凸出 http://blog.csdn.net/hupei/article/details/52064946
Ajax

52,797

社区成员

25,305

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章