基于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 >< 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 =￡ＡDほiＬ￡,男,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 =￡ＡDほiＬ￡  href ="http://www.jscss8.com/"  
  target =_blank > ￡ＡDほ... </ 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 =ＰＡＤＡ,男,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 =ＰＡＤＥＱＩＢＡＬＡ  href ="http://www.jscss8.com/"  
  target =_blank > ＰＡＤ... </ 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 >

 

 

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/30/1768014.html