查看效果

下载地址

基于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

基于jQuery的 随机头像显示功能相关推荐

  1. html头像转动,基于jquery实现人物头像跟随鼠标转动

    一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸&qu ...

  2. 基于jquery的带事件显示功能的日历板插件calendar.js

    项目中需要用到一个日历板控件,要求能显示事件,于是想到了一年前在app项目上写的一个粗略版日历板,然后又想着这个可能以后还会用 于是我就封装了一下,能满足基本要求,如果有需要更多功能的也可以自行修改源 ...

  3. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  4. html5中奖名单特效,jQuery基于json动态随机获取中奖名单抽奖代码

    jQuery基于json动态随机获取中奖名单抽奖代码,可以随机批量抽出多个中奖用户名单. 查看演示 下载资源: 22 次 下载资源 下载积分: 20 积分 js代码 //从一个给定的数组arr中,随机 ...

  5. html头像特效,一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 实现的代码. html代码: H ...

  6. ajax 随机,基于JQuery及AJAX实现名人名言随机生成器

    基于JQuery及AJAX实现名人名言随机生成器 发布于 2017-05-05 06:56:38 | 137 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQu ...

  7. html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,misl ...

  8. node php知乎,基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果

    最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 ...

  9. 【精心挑选】10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

最新文章

  1. XCOM串口助手打印不出数据
  2. 汇编语言--CPU对存储器的读写
  3. Java设计模式(三) -- 代理模式
  4. 互斥同步（synchronized、Lock、ReentrantLock、ReadWriteLock、ReentrantReadWriteLock）
  5. VTK：Utilities之BoundingBoxIntersection
  6. [转]html5 Canvas画图教程(1)—画图的基本常识
  7. wdcp服务器/虚拟主机管理系统,wdcp服务器/虚拟主机管理系统1.1发布(最后更新20110423)...
  8. 《MySQL—— 业务高峰期的性能问题的紧急处理的手段 》
  9. django html显示xml,如何将HTML与Django集成？
  10. dataframe常用操作总结
  11. DSP实验报告—实验1
  12. 关键词挖掘的9种方法
  13. 厦门大学计算机科学与工程学院,厦门大学
  14. 本学期在实验室的收获
  15. 如虎添翼 7 个转场技巧
  16. 软件加入使用时间_【安卓】换了这么多影视软件，还是这个老牌站点最靠谱
  17. iPad 手指触摸与PC鼠标事件
  18. 【WIN10】如何关闭右下角输入法的“拼”字
  19. python中心性评价_centrality 计算复杂网络中的节点或边 数中心性，基于python的 工具箱 matlab 238万源代码下载- www.pudn.com...
  20. localhost是什么？

热门文章

  1. 我为什么没有加入苹果的iOS APP移动大军?[最近更新:2015-02-03]
  2. 关于学C语言的事（2）
  3. linux添加新用户；linux常见命令；linux自定义终端命令
  4. 爱奇艺被曝大规模裁员20%-40%
  5. chrome和edge浏览器，实现视频不静音自动播放
  6. Google App Inventor下载地址
  7. TREK1000概述--实时定位系统
  8. matlab画漂亮的树叶,漂亮的树叶简笔画作品 - 学院 - 摸鱼网 - Σ(っ °Д °;)っ 让世界更萌~ mooyuu.com...
  9. (转)悲催IT男的心酸恋爱史
  10. iotop和iostat