`
azure2a
  • 浏览: 32747 次
  • 性别: Icon_minigender_1
  • 来自: 承德
社区版块
存档分类
最新评论

一个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>
  

分享到:
评论

相关推荐

    jquery 头像墙效果

    通过以上步骤,你可以创建出一个功能完善的jQuery头像墙效果。需要注意的是,实际项目中可能需要根据具体需求进行调整和扩展,例如添加头像的hover效果、加载更多按钮等。此外,对于大型项目,还应考虑SEO优化、响应...

    一个基于ASP.NET+C#实现的多记录下拉选择列表控件例子

    "一个基于ASP.NET+C#实现的多记录下拉选择列表控件例子"就是针对这一需求的具体实现,它将帮助开发者构建高效、易用的前端界面。 首先,ASP.NET是微软推出的Web应用程序框架,用于构建动态网站、Web应用和服务。它...

    jQuery类似手机QQ界面

    本项目“jQuery类似手机QQ界面”旨在利用jQuery构建一个模仿手机QQ应用的用户界面,包括好友列表页面和聊天界面,提供丰富的用户体验,如表情包发送和图片分享功能。 首先,我们要理解jQuery的核心特性。jQuery通过...

    Jquery实现评论内容上下滑动切换效果

    通常,每个评论会被封装在一个`&lt;div&gt;`或其他块级元素中,用类名区分,便于jQuery选择和操作。例如: ```html 作者 评论内容 ``` 至于图片`4920841.jpg`,可能用于装饰或示例,也可能与评论相关,比如用户头像...

    实现QQ列表

    首先,"实现QQ列表"意味着我们需要创建一个用户界面,能够显示QQ用户的昵称、头像、在线状态等信息。这涉及到前端开发技术,通常我们会使用HTML、CSS和JavaScript来构建这样的界面。HTML负责结构化内容,CSS用于样式...

    基于JQuery的几个不错的图片处理插件

    对于需要用户上传图片并进行裁剪的应用,`jQuery.Jcrop`插件是一个好选择。它提供了交互式的图像裁剪功能,支持预览、比例锁定和多区域裁剪,适合于在线编辑和上传头像等功能。 5. **图片轮播效果**: `Swiper`是...

    jQuery评论回复插件.zip

    **jQuery评论回复插件** jQuery是一个广泛应用于网页...总的来说,这个jQuery评论回复插件旨在为网站提供一个交互性强、功能全面的用户交流平台,利用jQuery的强大功能和简洁API,简化了开发者实现此类功能的复杂度。

    仿QQ好友列表显示效果

    在Android开发中,仿QQ好友列表显示效果是一个常见的需求,主要涉及到`ExpandableListView`控件的使用。`ExpandableListView`是Android SDK提供的一种可扩展的列表视图,它可以展示分组数据,并且每个分组可以展开或...

    仿qq的动态列表框

    在IT行业中,动态列表框是一种常见的用户界面元素,它允许用户在列表中选择一个或多个项,同时可以显示丰富的信息并支持动态更新。在本例中,我们关注的是一个模仿QQ登录界面的动态列表框。QQ是中国最流行的即时通讯...

    基于Servlet+JDBC+jsp实现员工信息管理系统【源码+数据库】

    可提交员工头像员工列表修改员工信息删除员工信息批量删除员工信息添加员工信息根据条件查询员工信息上传员工头像分页查询员工列表4、数据库表说明员工表(员工编号,员工姓名,性别,部门编号,工资,地址,职位,头像文件...

    动态产品列表的友好展示 .

    描述中的链接指向了一个具体的博客文章,虽然无法直接查看具体内容,但可以推测该文章可能讲解了如何使用JavaScript和XML来创建一个友好的动态产品列表。 首先,JavaScript作为客户端脚本语言,是实现网页动态性的...

    jquery.flexText.js

    简易的评论回复插件,提供评论 回复点赞功能 头像脚本可单独设置 可扩展 内容 暂无分页加载功能 需重新外部添加 结合后端评论数据 动态展示评论效果 可做中间件

    javaWeb项目:基于Servlet+jsp+mysql开发的员工信息管理系统【源码+数据库】

    1、项目简介 本项目是一套基于Servlet+JDBC+jsp实现员工信息管理系统,主要...分页查询员工列表 4、数据库表说明 员工表(员工编号,员工姓名,性别,部门编号,工资,地址,职位,头像文件名称) 部门表(部门编号,部门名称)

    个人网站建设及实现

    在个人网站建设及实现的过程中,我们通常会涉及到一系列的技术和工具,这些技术和工具的结合使得创建一个功能完善的个人网站成为可能。本项目基于SpringMVC框架,配合MySQL数据库,提供了后台分页、富文本编辑器、...

    基于PHP 漂亮的全站程序-JOYS的小窝的毕业设计,实现用户的博客发布、修改、删除等功能,并包括博客分类、博客标签、博客评论等

    本毕设将实现一个漂亮的全站程序,包括用户模块、博客模块、留言板模块和后台管理模块。同时,本毕设的设计理念是简洁、美观、易用,用户体验良好。 ## 结论 本毕设旨在设计和实现一个基于PHP的漂亮的全站程序,名...

    MF00954-WebChat网页聊天室源码.zip

    数据库使用MySQL 前端采用Amaze UI,弹窗和分页使用的是Layer,当然还有Jquery 实现功能 :用户登录、用户信息展示、用户信息修改、用户头像修改、修改密码、 在线聊天、在线列表展示、群聊和私聊、日志记录展示等.

    Python开发基于Django和Vue3实现的一个Web编程对战平台系统源码+详细使用说明.zip

    【资源说明】Python开发基于Django和Vue3实现的一个Web编程对战平台系统源码+详细使用说明.zip平台主要功能此作品是基于Python开发语言使用Django后端框架与Vue3前端框架实现的一个Web网站平台,此平台主要是为了给...

    asp.net中Gridview的应用与实现

    在ASP.NET中,GridView控件是一个非常常用的组件,它用于展示数据,并且提供了丰富的功能,如排序、分页、筛选以及编辑、删除和插入数据。本篇将深入探讨如何在实际项目中应用和实现Gridview的功能。 首先,...

    AJAX无刷新留言 无刷新

    - **Book_Add.aspx**:用户提交留言的页面,可能包含一个表单,用户输入留言内容并选择头像。提交时,AJAX调用此页面,异步发送数据到服务器。 - **VerifyCode.aspx**:验证码页面,用于防止机器人自动提交,保护...

Global site tag (gtag.js) - Google Analytics