您的位置:首页 > Web前端 > JQuery

基于jQuery的 随机头像显示功能

2010-06-30 08:54 344 查看
查看效果

下载地址

基于jQuery的 随机头像显示功能,并且带有精美的提示效果,确实挺不错的,其实不要仅限于“头像”,只有有图片显示的地方都能用到的,像产品类网站,交友类网站都可以,jQuery爱好者可以学习一下随机数控制相关知识,看一下效果图吧,感觉挺实用的功能。

前台部分代码

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<link href="css/css.css" rel="stylesheet" type="text/css">
<title>jQuery 随机头像显示 by www.jscss8.com</title>
<SCRIPT src="js/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
//搜索
var ntype = 0;
var stype = new Array("音乐","伴奏","图片","视频","用户","圈子");

function Offset(e)
//取标签的绝对位置
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;

while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}

function setMenuBind(obj,mobj,cname,xt,yt)
{
$(obj).hover(
function(){
setMenuShow(this,mobj.get(0),xt,yt);
obj.addClass(cname);
},
function(){
obj.removeClass(cname);
mobj.hide();
}
);

$(mobj).hover(
function(){
obj.addClass(cname);
mobj.show();
},
function()
{
obj.removeClass(cname);
mobj.hide();
}
);
}

function setMenuShow(obj,mobj,xt,yt)//xt top位移 yt居左位移
{
var offset=Offset(obj);
mobj.style.position = "absolute";
mobj.style.height = offset.height + "px";
mobj.style.top = (offset.top + xt) + "px";
mobj.style.left = (offset.left + yt) + "px";
mobj.style.display = "block";
}

function setLiOver(obj,cname)
{//obj=jquery obj

obj.hover(
function(){
$(this).addClass(cname);
},
function()
{
$(this).removeClass(cname);
}
);
}

function loadImages()
{
var url = "images/";
var d=document; if(d.images)
{
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=loadImages.arguments;
for(i=0; i<a.length; i++)
{
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=url+a[i];}
}
}
}

function ChangeTab()
{
$("#fen_music_0").eq(0).show();

$(".musicbut li").hover(
function(){
$(".musicbut li").removeClass("on");
$(this).addClass("on");
$(".musictab").hide();
$("#fen_music" + this.id.substr(this.id.lastIndexOf("_"))).show();
},
function(){
//$(this).removeClass("on");
}
);

$(".musictab").mouseover(function(){
$("#tab_music" + this.id.substr(this.id.lastIndexOf("_"))).addClass("on");
});
}

//头像信息
function BindHead()
{
var mobj = $("#user_msg").get(0);
var mcon = $(".uright").eq(0);
var mtxt = "";

$(".face").hover(
function(){
var offset=Offset(this);
ShowTip(mobj,offset);
if (mtxt != undefined)
{
mtxt = $(this).attr("title");
}
$(this).attr("title","");
ChangeTitle(mcon,mtxt);
},
function(){
HideTip(mobj);
$(this).attr("title",mtxt);
}
);
}

function ShowTip(obj,offset)
{
obj.style.position = "absolute";
obj.style.height = offset.height + "px";
if($.browser.msie)
{
obj.style.top = (offset.top + 0) + "px";
}
else
{
obj.style.top = (offset.top + -60) + "px";
}
obj.style.left = offset.left + 66 + "px";
obj.style.display = "block";
}

function HideTip(obj)
{
obj.style.display = "none";
}

function ChangeTitle(obj,txt)
{
var s = txt.split(",");
var t = "";

//alert(s.length);

if(s.length == 4)
{
t = "<strong class=\"red\">"+s[0]+"</strong><br/> (" + s[2] + "岁" + s[1] +"生) <br/>来自:" + s[3] + " ";
}
else
{
t = "hi,快来看看我是谁:)";
}

obj.html(t);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV class=middle>
<DIV class=navigatebox></DIV>
<DIV class=broadcastbox>
<DIV class=newstitle01><IMG
src="images/angle_05.gif"></DIV>
<DIV class="broadcastcont lrline friendheight"><STRONG class=red>找朋友:</STRONG>
 性别: <SELECT class=drp id=drp_sex> <OPTION value=0 selected>女</OPTION>
<OPTION value=1>男</OPTION></SELECT>  地区: <SELECT class=drp id=drp_pro>
<OPTION value=全部 selected>全部</OPTION> <OPTION value=北京>北京</OPTION> <OPTION
value=上海>上海</OPTION> <OPTION value=天津>天津</OPTION> <OPTION value=重庆>重庆</OPTION>
<OPTION value=四川>四川</OPTION> <OPTION value=吉林>吉林</OPTION> <OPTION
value=辽宁>辽宁</OPTION> <OPTION value=黑龙江>黑龙江</OPTION> <OPTION
value=青海>青海</OPTION> <OPTION value=内蒙古>内蒙古</OPTION> <OPTION
value=新疆>新疆</OPTION> <OPTION value=宁夏>宁夏</OPTION> <OPTION value=甘肃>甘肃</OPTION>
<OPTION value=陕西>陕西</OPTION> <OPTION value=河北>河北</OPTION> <OPTION
value=河南>河南</OPTION> <OPTION value=贵州>贵州</OPTION> <OPTION value=云南>云南</OPTION>
<OPTION value=贵州>贵州</OPTION> <OPTION value=浙江>浙江</OPTION> <OPTION
value=江苏>江苏</OPTION> <OPTION value=山东>山东</OPTION> <OPTION value=山西>山西</OPTION>
<OPTION value=江西>江西</OPTION> <OPTION value=安徽>安徽</OPTION> <OPTION
value=西藏>西藏</OPTION> <OPTION value=湖北>湖北</OPTION> <OPTION value=湖南>湖南</OPTION>
<OPTION value=广西>广西</OPTION> <OPTION value=广东>广东</OPTION> <OPTION
value=福建>福建</OPTION> <OPTION value=海南岛>海南岛</OPTION> <OPTION
value=香港>香港</OPTION> <OPTION value=澳门>澳门</OPTION> <OPTION value=台湾>台湾</OPTION>
<OPTION value=海外>海外</OPTION></SELECT>  年龄: <INPUT id=txt_age1
style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 11px; PADDING-BOTTOM: 1px; WIDTH: 20px; COLOR: #000; PADDING-TOP: 1px; HEIGHT: 16px"
value=18> 到 <INPUT id=txt_age2 onKeyDown="if(event.keyCode==13) goFriend();"
style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; FONT-SIZE: 11px; PADDING-BOTTOM: 1px; WIDTH: 20px; COLOR: #000; PADDING-TOP: 1px; HEIGHT: 16px"
onclick=this.focus(); value=25> <IMG class="btnBg btnSearchF" style="CURSOR: pointer" src="images/over.gif" align=absMiddle> <STRONG
class=red><A href="http://www.alixixi.com/"
target=_blank>有谁在线?</A></STRONG>
<DIV class=line></DIV></DIV>
<DIV class="friendcont lrline"
style="MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: -15px">
<DIV style="TEXT-ALIGN: center"><IMG
src="images/loading02.gif"></DIV></DIV>?
<DIV class="friendcont lrline">
<UL>
<LI>
<DIV><A class=face title=o0┈希望有①天o0,女,21,香港
href="http://www.alixixi.com/" target=_blank><IMG height=68
src="images/51973924516607.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=o0┈希望有①天o0 href="http://www.jscss8.com/"
target=_blank>o0┈...</A></H6></LI>
<LI>
<DIV><A class=face title=NECCOZZANG,女,16,重庆
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/70625611801530.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=NECCOZZANG href="http://www.jscss8.com/"
target=_blank>NECCO...</A></H6></LI>
<LI>
<DIV><A class=face title="KISS MY AS,男,4,吉林"
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/62013722829000.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title="KISS MY AS" href="http://www.jscss8.com/"
target=_blank>KISS MY...</A></H6></LI>
<LI>
<DIV><A class=face title=随机访问
href="http://www.jscss8.com/" target=_blank><IMG
height=68 src="images/girl.gif" width=68
border=0></A></DIV>
<H6><A title=随机访问 href="http://www.jscss8.com/"
target=_blank ?>随机访问</A></H6></LI>
<LI>
<DIV><A class=face title=小彰P,女,18,海外 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/48480550352340.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=小彰P href="http://www.jscss8.com/"
target=_blank>小彰P</A></H6></LI>
<LI>
<DIV><A class=face title=k歌军团**小猪,女,18,江西
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/68824075231077.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=k歌军团**小猪 href="http://www.jscss8.com/"
target=_blank>k歌军团...</A></H6></LI></UL></DIV>
<DIV class="friendcont lrline">
<UL>
<LI>
<DIV><A class=face title=赖赖唱^0^,女,20,上海 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/61989020109107.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=赖赖唱^0^ href="http://www.jscss8.com/"
target=_blank>赖赖唱^...</A></H6></LI>
<LI>
<DIV><A class=face title=£ADほiL£,男,16,新疆 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/57739124817327.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=£ADほiL£ href="http://www.jscss8.com/"
target=_blank>£ADほ...</A></H6></LI>
<LI>
<DIV><A class=face title="『 STAR 』,女,21,新疆"
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/58653773953700.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title="『 STAR 』" href="http://www.jscss8.com/" target=_blank>『
STAR...</A></H6></LI>
<LI>
<DIV><A class=face title=惩罚者¥,男,23,新疆 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/54499964144110.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=惩罚者¥ href="http://www.jscss8.com/"
target=_blank>惩罚者¥</A></H6></LI>
<LI>
<DIV><A class=face title=xamuh621,女,24,新疆
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/69007483650920.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=xamuh621 href="http://www.jscss8.com/"
target=_blank>xamuh6...</A></H6></LI>
<LI>
<DIV><A class=face title=yayah917,女,14,香港
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/73243811548060.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=yayah917 href="http://www.jscss8.com/"
target=_blank>yayah917</A></H6></LI></UL></DIV>
<DIV class="friendcont lrline">
<UL>
<LI>
<DIV><A class=face title=蓝韵ai,女,14,河南 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/49619272121233.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=蓝韵ai href="http://www.jscss8.com/"
target=_blank>蓝韵ai</A></H6></LI>
<LI>
<DIV><A class=face title=女玩家!!,女,72,海外 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/71582540621077.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=女玩家!! href="http://www.jscss8.com/"
target=_blank>女玩家...</A></H6></LI>
<LI>
<DIV><A class=face title=诸葛湘枫,女,13,福建 href="http://www.jscss8.com/"
target=_blank><IMG height=68
src="images/56862952928890.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=诸葛湘枫 href="http://www.jscss8.com/"
target=_blank>诸葛湘枫</A></H6></LI>
<LI>
<DIV><A class=face title=PADA,男,19,新疆
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/61089143529200.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=PADEQIBALA href="http://www.jscss8.com/"
target=_blank>PAD...</A></H6></LI>
<LI>
<DIV><A class=face title=k歌军团**素素,女,19,广东
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/66363482638217.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=k歌军团**素素 href="http://www.jscss8.com/"
target=_blank>k歌军团...</A></H6></LI>
<LI>
<DIV><A class=face title=abigail千年石,女,22,江苏
href="http://www.jscss8.com/" target=_blank><IMG height=68
src="images/69130271532310.jpg_142.jpg" width=68
border=0></A></DIV>
<H6><A title=abigail千年石 href="http://www.jscss8.com/"
target=_blank>abigail...</A></H6></LI></UL></DIV><!-- userinfo -->
<DIV id=user_msg>
<DIV class=uleft></DIV>
<DIV class=uright></DIV>
<DIV class=clear></DIV></DIV>
<SCRIPT type=text/javascript>
BindHead();

$(".friendcont").eq(0).hide();
$(".friendcont").eq(Math.floor(Math.random()*10%3)+1).show(0);
</SCRIPT>

<DIV class=newstitle01><IMG
src="images/angle_09.gif"></DIV></DIV>
</DIV>
<DIV class=clear></DIV>
</BODY></HTML>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: