六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 163|回复: 0

一个JQuery实现的带分页头像选择列表。

[复制链接]

升级  60%

6

主题

6

主题

6

主题

童生

Rank: 1

积分
30
 楼主| 发表于 2013-1-29 08:45:52 | 显示全部楼层 |阅读模式
最近在给学生做个论坛,初学JS和JQuery,尝试做了个带分页头像选择列表。
代码如下:
     var lee={};lee.utils={};lee.utils.face_list=function(st,to,si,img_width,img_height,tar,callback){   var start=st;   var total=to;   var size=si;   var page=total%size==0?total/size:Math.floor(total/size)+1;         return {      make_list:function(){              $("<div id='face_list'></div><div id='img_list'></div><div id='page_list'></div>").appendTo(tar);              for(var i=1;i<=page;i++){         var $p=$("<a href='javascript:void(0);' page="+i+" style='margin-right:5px;'>第"+i+"页</a>");            $p.click(function(){              var page=$(this).attr("page");              $("#img_list").empty();                      var page_start=start+(page-1)*size;           var page_end=start+(page-1)*size+size<start+total?start+(page-1)*size+size:start+total;                      for(var i=page_start;i<page_end;i++){             var $img=$("<img src='image/loadding.gif' style='margin:5px;width:"+img_width+";height:"+img_height+"' lazy_src='image/face/image"+i+".gif' title='image"+i+".gif'/>");             $img.click(function(){callback($(this).attr("title"))});                                           $img.appendTo("#img_list");                                            }                                                       $("#img_list img").each(function(){                    $(this).attr("src",$(this).attr("lazy_src"));                    });                       });            if(i==1)$p.click();            $p.appendTo($("#page_list"));       };             }    }    };  
  调用代码:
    <script language="javascript">         $(function(){                     lee.utils.face_list(135,328,15,72,122,$("#list"),function(name){                 $("#user_face").val(name);                 $("#select_face").attr("src","image/face/"+name);                 }).make_list();               });    </script>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表