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

查看效果

下载地址

基于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> 
&nbsp;性别: <SELECT class=drp id=drp_sex> <OPTION value=0 selected></OPTION> 
  
<OPTION value=1></OPTION></SELECT> &nbsp;地区: <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> &nbsp;年龄: <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><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><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><title=o0┈希望有①天o0 href="http://www.jscss8.com/" 
  target
=_blank>o0┈...</A></H6></LI>
  
<LI>
  
<DIV><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><title=NECCOZZANG href="http://www.jscss8.com/" 
  target
=_blank>NECCO...</A></H6></LI>
  
<LI>
  
<DIV><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><title="KISS MY AS" href="http://www.jscss8.com/" 
  target
=_blank>KISS MY...</A></H6></LI>
  
<LI>
  
<DIV><class=face title=随机访问 
  
href="http://www.jscss8.com/" target=_blank><IMG 
  
height=68 src="images/girl.gif" width=68 
  
border=0></A></DIV>
  
<H6><title=随机访问 href="http://www.jscss8.com/" 
  target
=_blank ?>随机访问</A></H6></LI>
  
<LI>
  
<DIV><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><title=小彰P href="http://www.jscss8.com/" 
  target
=_blank>小彰P</A></H6></LI>
  
<LI>
  
<DIV><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><title=k歌军团**小猪 href="http://www.jscss8.com/" 
  target
=_blank>k歌军团...</A></H6></LI></UL></DIV>
<DIV class="friendcont  lrline">
<UL>
  
<LI>
  
<DIV><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><title=赖赖唱^0^ href="http://www.jscss8.com/" 
  target
=_blank>赖赖唱^...</A></H6></LI>
  
<LI>
  
<DIV><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><title=£ADほiL£ href="http://www.jscss8.com/" 
  target
=_blank>£ADほ...</A></H6></LI>
  
<LI>
  
<DIV><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><title="『 STAR 』" href="http://www.jscss8.com/" target=_blank>『 
  STAR...
</A></H6></LI>
  
<LI>
  
<DIV><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><title=惩罚者¥ href="http://www.jscss8.com/" 
  target
=_blank>惩罚者¥</A></H6></LI>
  
<LI>
  
<DIV><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><title=xamuh621 href="http://www.jscss8.com/" 
  target
=_blank>xamuh6...</A></H6></LI>
  
<LI>
  
<DIV><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><title=yayah917 href="http://www.jscss8.com/" 
  target
=_blank>yayah917</A></H6></LI></UL></DIV>
<DIV class="friendcont  lrline">
<UL>
  
<LI>
  
<DIV><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><title=蓝韵ai href="http://www.jscss8.com/" 
  target
=_blank>蓝韵ai</A></H6></LI>
  
<LI>
  
<DIV><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><title=女玩家!! href="http://www.jscss8.com/" 
  target
=_blank>女玩家...</A></H6></LI>
  
<LI>
  
<DIV><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><title=诸葛湘枫 href="http://www.jscss8.com/" 
  target
=_blank>诸葛湘枫</A></H6></LI>
  
<LI>
  
<DIV><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><title=PADEQIBALA href="http://www.jscss8.com/" 
  target
=_blank>PAD...</A></H6></LI>
  
<LI>
  
<DIV><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><title=k歌军团**素素 href="http://www.jscss8.com/" 
  target
=_blank>k歌军团...</A></H6></LI>
  
<LI>
  
<DIV><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><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>

 

 

posted @ 2010-06-30 08:54  深邃老马  阅读(408)  评论(0编辑  收藏  举报