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

最新推荐文章于 2022-10-15 21:53:24 发布

iteye_81

最新推荐文章于 2022-10-15 21:53:24 发布

阅读量232

点赞数

分类专栏：表现层技术文档文章标签： js javascript jquery ViewUI

本文链接：https://blog.csdn.net/iteye_81/article/details/82341017

版权

表现层技术文档专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在给学生做个论坛，初学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>