一个JQuery实现的带分页头像选择列表。
最近在给学生做个论坛，初学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>
页:
[1]